/* ---------- tokens ---------- */
:root {
  --navy: #1f2a37;
  --navy-soft: #5b6674;
  --bg: #ffffff;
  --bg-soft: #f4f9f8;
  --card: #ffffff;
  --line: #e3eae9;

  --teal: #0e7c7b;
  --emerald: #16a34a;
  --gradient: linear-gradient(90deg, var(--teal), var(--emerald));
  --gradient-text: linear-gradient(90deg, #0b6f74, #1a9a54);

  --coral: #f0623c;
  --coral-tint: #fde7e0;
  --amber: #e2960f;
  --amber-tint: #fbf0dc;
  --teal-tint: #e0f0ef;

  /* The same two hues, dark enough to carry small text.
     #16a34a and #f0623c measure 3.30:1 and 3.22:1 on white, which is
     fine for a fill or a headline and short of the 4.5:1 that body-size
     text needs. These are 5.4:1 and 5.6:1. The originals stay for
     buttons, gradients and tints, where they are right. */
  --emerald-text: #107a38;
  --coral-text: #bd3a17;
  --emerald-tint: #e3f6e9;

  --font-display: "Poppins", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --radius: 16px;
  --radius-sm: 10px;
  --wrap: 1160px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.18;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
  color: var(--navy);
}

p { margin: 0 0 1em; color: var(--navy-soft); }

a { color: var(--teal); }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

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

.gradient-word {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--gradient);
  color: #fff;
  box-shadow: 0 12px 24px -10px rgba(14, 124, 123, 0.45);
}
.btn-primary:hover { box-shadow: 0 16px 30px -8px rgba(14, 124, 123, 0.55); transform: translateY(-1px); }

.btn-outline { background: #fff; color: var(--navy); border-color: var(--line); }
.btn-outline:hover { border-color: var(--teal); color: var(--teal); }

.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--navy-soft); }

.btn-small { padding: 10px 18px; font-size: 14px; }
.btn-block { width: 100%; }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 16px;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--navy);
  text-decoration: none;
}

.brand-suffix { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

.brand-mark { flex-shrink: 0; display: block; }

.site-nav { display: flex; gap: 30px; flex: 1; }
.nav-toggle { display: none; }
.nav-cta { display: none; }
.site-nav a { color: var(--navy-soft); text-decoration: none; font-weight: 500;
  font-size: 15px; white-space: nowrap; }
.site-nav a:hover { color: var(--navy); }

/* ---------- hero ---------- */
.hero { padding: 64px 0 88px; position: relative; overflow: hidden; }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: 56px;
  align-items: center;
}

.eyebrow, .section-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0 0 14px;
}

.hero-copy h1 { font-size: clamp(2.2rem, 4vw, 3.15rem); max-width: 16ch; }

.hero-sub { font-size: 17px; max-width: 46ch; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.hero-cta .btn { text-decoration: none; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13.5px; color: var(--navy-soft); margin-top: 16px; }
.hero-trust span { display: inline-flex; align-items: center; gap: 6px; }
.hero-trust span::before { content: "✓"; color: var(--emerald-text); font-weight: 700; }

/* ---------- hero photo + floating card ---------- */
.hero-visual { position: relative; }

.hero-photo {
  width: 100%;
  aspect-ratio: 5 / 4;
  /* Load-bearing. The <img> carries width and height attributes so the
     browser can reserve its space, and without this the height
     attribute becomes the used height: the photo rendered 800px tall in
     a 506px column. Same trap as the guide thumbnails. */
  height: auto;
  object-fit: cover;
  object-position: 60% 55%;
  border-radius: 20px;
  border: 1px solid var(--line);
  box-shadow: 0 40px 70px -36px rgba(31, 42, 55, 0.4);
}

.hero-float-card {
  position: absolute;
  left: -28px;
  bottom: 28px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 24px 48px -24px rgba(31, 42, 55, 0.4);
  padding: 16px 18px;
  min-width: 168px;
}

.hero-mood-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.hero-mood-emoji { font-size: 20px; line-height: 1; display: inline-block; }
.hero-mood-emoji.is-popping { animation: hero-mood-pop 0.4s ease; }
@keyframes hero-mood-pop {
  0% { transform: scale(0.6) rotate(-8deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(4deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.hero-mood-text { display: flex; flex-direction: column; line-height: 1.3; }
.hero-mood-text strong { font-size: 12.5px; color: var(--navy); }
.hero-mood-text span { font-size: 11px; color: var(--navy-soft); }
.hero-mood-text span.is-productive { color: var(--emerald-text); font-weight: 600; }
.hero-mood-text span.is-distracted { color: var(--coral-text); font-weight: 600; }
.hero-mood-caption { font-size: 10px; color: var(--navy-soft); opacity: 0.75; margin: 6px 0 0; font-style: italic; }

/* ---------- product mockup card labels (shared by hero float card + product tour) ---------- */
.mock-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy-soft);
  margin: 0 0 10px;
}

.mock-time { font-family: var(--font-mono); font-size: 22px; font-weight: 600; margin: 0 0 8px; color: var(--navy); }

.mock-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--emerald-text);
  background: var(--emerald-tint);
  padding: 3px 9px;
  border-radius: 999px;
}

/* ---------- trust strip ---------- */
.trust-strip { padding: 56px 0; background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.trust-chip { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 28px; min-width: 180px; text-align: center; }
.trust-chip strong {
  font-family: var(--font-display);
  font-size: 26px;
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.trust-chip span { font-size: 13px; color: var(--navy-soft); }

/* ---------- product tour (single framed window) ---------- */
.tour { padding: 96px 0; }
.tour-head { text-align: center; max-width: 56ch; margin: 0 auto 44px; }
.tour-head .section-eyebrow { justify-content: center; }

.mock-window {
  max-width: 860px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(31, 42, 55, 0.4);
}

.mock-titlebar { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.mock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.mock-url { margin-left: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--navy-soft); }

.mock-body { display: flex; }

.mock-sidebar {
  width: 46px;
  flex-shrink: 0;
  background: var(--bg-soft);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
}
.mock-side-item { width: 18px; height: 18px; border-radius: 6px; background: var(--line); }
.mock-side-active { background: var(--teal); }

.mock-main { flex: 1; padding: 22px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mock-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.mock-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }

.mock-score { display: flex; flex-direction: column; }
.mock-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: conic-gradient(var(--teal) 0 87%, var(--line) 0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mock-ring span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--navy);
}

.mock-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-bottom: 8px; }
.mock-bar-fill { height: 100%; width: 68%; background: var(--amber); border-radius: 999px; }
.mock-figures { font-size: 12px; margin: 0; color: var(--navy-soft); }

.mock-briefing ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; text-align: left; }
.mock-briefing li { font-size: 12.5px; color: var(--navy); padding-left: 16px; position: relative; }
.mock-briefing li::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--coral); }

/* ---------- sections, generic ---------- */
section { padding: 96px 0; }

section > .wrap > h2, .pricing h2, .how h2, .faq h2, .features h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.3rem);
  max-width: 26ch;
}

/* ---------- features ---------- */
.features { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }

/* Grouped features. Twenty-nine cards in one flat wall is a spec sheet;
   the reader gives up somewhere around the eighth. Eight named groups
   with a sentence of their own lets somebody find the two they came for
   and skim the rest, which is the only way a long page gets read. */
.feature-group { padding: 44px 0 8px; }

/* Downloads. Two columns rather than auto-fit: with four artifacts,
   auto-fit hands you three across and one stranded on its own row. */
.downloads { padding: 8px 0 72px; }

/* ---------- one-time pricing ---------- */
.onetime { padding: 8px 0 64px; }
.onetime-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.onetime-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px; background: var(--card);
}
.onetime-label { font-size: 12px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--navy-soft); margin: 0 0 10px; }
.onetime-price { font-family: var(--font-display); font-size: 52px; font-weight: 700;
  line-height: 1; margin: 0 0 22px; letter-spacing: -.02em; }
.onetime-price span { font-size: 17px; font-weight: 500; color: var(--navy-soft); margin-left: 10px; }
.onetime-list { list-style: none; margin: 0 0 24px; padding: 0; }
.onetime-list li { position: relative; padding: 8px 0 8px 26px; font-size: 15px;
  border-bottom: 1px solid var(--line); }
.onetime-list li:last-child { border-bottom: 0; }
/* Escaped, not literal. This was a tick pasted in as UTF-8 and it
   reached the stylesheet decoded as something else -- the pricing
   page shipped with a mojibake glyph beside every feature. A CSS
   escape is ASCII in the source and cannot be mangled again. */
.onetime-list li::before { content: "\2713"; position: absolute; left: 0;
  color: var(--emerald-text); font-weight: 700; }
.onetime-cta { width: 100%; }
.onetime-note { font-size: 13px; color: var(--navy-soft); margin: 12px 0 0; text-align: center; }
.onetime-why h2 { font-family: var(--font-display); font-size: 22px; margin: 0 0 14px; }
.onetime-why p { color: var(--navy-soft); font-size: 15.5px; line-height: 1.7; margin: 0 0 14px; }
.onetime-aside { border-left: 2px solid var(--line); padding-left: 16px; font-size: 14.5px; }
@media (max-width: 860px) { .onetime-grid { grid-template-columns: 1fr; } }

/* ---------- 404 ---------- */
.nf-list { list-style: none; margin: 0 0 24px; padding: 0; }
.nf-list li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; color: var(--navy-soft); }
.nf-list li:last-child { border-bottom: 0; }
.nf-list a { font-weight: 600; color: var(--navy); }

/* ---------- use cards: small demos of the real output ----------
   Each card shows the thing itself rather than a glyph standing in for
   it. Everything is built from the page's own tokens -- no images, no
   external requests -- which matters on a page whose argument is that
   nothing leaves your machines. */
.use-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; background: var(--card);
  display: flex; flex-direction: column;
}
.use-card h3 { font-size: 17px; font-family: var(--font-display); margin: 0 0 8px; }
.use-card > p { font-size: 14.5px; line-height: 1.7; color: var(--navy-soft); margin: 0 0 18px; }
.demo { margin-top: auto; font-size: 12.5px; }
.demo-caption { font-size: 12px; line-height: 1.55; color: var(--navy-soft); margin: 10px 0 0; }

/* timesheet */
.demo-timesheet { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.demo-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 8px;
  padding: 7px 10px; border-bottom: 1px solid var(--line); }
.demo-row:last-child { border-bottom: 0; }
.demo-row-head { background: var(--bg-soft); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--navy-soft); }
.demo-row span:last-child { font-variant-numeric: tabular-nums; text-align: right; }
.demo-row-new { background: var(--emerald-tint); }
/* Clipped to zero width and revealed on a step timing, so it reads as
   the line being written rather than sliding in from somewhere. */
.demo-typing { overflow: hidden; white-space: nowrap; display: inline-block;
  vertical-align: bottom; width: 100%; }
.js .use-card:not(.is-live) .demo-typing { width: 0; }
.js .use-card.is-live .demo-typing { animation: demo-type 1.5s steps(24) .3s forwards; }
@keyframes demo-type { to { width: 100%; } }

/* attendance */
.demo-day { display: flex; align-items: center; gap: 10px; }
.demo-time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--navy); }
.demo-track { flex: 1; height: 8px; border-radius: 999px; background: var(--bg-soft);
  overflow: hidden; }
.demo-fill { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--emerald)); width: 100%; }
.js .demo-fill { transition: width 1.1s ease .2s; }
.js .use-card:not(.is-live) .demo-fill { width: 0; }

/* budget */
.demo-budget-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.demo-budget-head span { font-variant-numeric: tabular-nums; color: var(--navy-soft); }
.demo-bar { position: relative; height: 10px; border-radius: 999px;
  background: var(--bg-soft); overflow: hidden; }
.demo-bar-fill { display: block; height: 100%; width: 68%;
  background: linear-gradient(90deg, var(--teal), var(--emerald)); }
.js .demo-bar-fill { transition: width 1.2s cubic-bezier(.22,.61,.36,1) .2s; }
.js .use-card:not(.is-live) .demo-bar-fill { width: 0; }
/* The half-way mark: the point of the card is noticing in week two. */
.demo-bar-mark { position: absolute; top: -3px; bottom: -3px; left: 50%; width: 2px;
  background: var(--navy); opacity: .35; }

/* focus: two weeks, same hours */
.demo-blocks { display: flex; gap: 3px; height: 34px; }
.demo-blocks i { flex: 1; border-radius: 3px;
  background: linear-gradient(180deg, var(--teal), var(--emerald)); }
.demo-blocks-frag { display: none; }
.demo-week[data-week="frag"] .demo-blocks-deep { display: none; }
.demo-week[data-week="frag"] .demo-blocks-frag { display: flex; }
.demo-switch { font: inherit; font-size: 12px; color: var(--teal); background: none;
  border: 0; padding: 8px 0; min-height: 32px; cursor: pointer; text-decoration: underline; }

/* leaderboard */
.demo-board-row { display: grid; grid-template-columns: 18px 60px 1fr; gap: 8px;
  align-items: center; padding: 5px 0; }
.demo-rank { color: var(--navy-soft); font-variant-numeric: tabular-nums; }
.demo-meter { height: 7px; border-radius: 999px; background: var(--bg-soft); overflow: hidden; }
.demo-meter i { display: block; height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--emerald)); }
.demo-board-row-quiet { font-weight: 600; }

/* evidence */
.demo-evidence-line { width: 100%; display: flex; justify-content: space-between; gap: 10px;
  align-items: center; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--navy); }
.demo-evidence-line:hover { border-color: var(--teal); }
.demo-evidence-cue { color: var(--teal); white-space: nowrap; }
.demo-evidence-line[aria-expanded="true"] .demo-evidence-cue { color: var(--navy-soft); }
.demo-evidence-body { padding: 10px 12px 0; }
.demo-evidence-body p { margin: 0 0 5px; font-size: 12px; color: var(--navy-soft); }

/* ---------- company footer ---------- */
/* Three columns, stated rather than auto-fitted: with three blocks of
   very different widths, auto-fit sizes them by content and the result
   reads as an accident rather than a layout. */
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; padding: 44px 0 32px; }
.footer-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; margin: 0 0 8px; }
.footer-line { font-size: 14px; line-height: 1.7; color: var(--navy-soft); margin: 0; max-width: 42ch; }
.footer-head { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--navy-soft); margin: 0 0 12px; }
.footer-nav { display: flex; flex-direction: column; gap: 9px; }
.footer-nav a { font-size: 14.5px; color: var(--navy); text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px 0 28px; border-top: 1px solid var(--line);
  font-size: 13.5px; color: var(--navy-soft); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- how-it-works page ---------- */
/* A long read, so the measure is narrow and the rhythm is generous.
   Wide body text is the single most common reason a detailed page goes
   unread -- past roughly 75 characters the eye loses the line return. */
.hiw-block { padding: 52px 0; }
.hiw-block + .hiw-block { border-top: 1px solid var(--line); }
.hiw-inner { max-width: 760px; }
.hiw-block h2 { font-family: var(--font-display); font-size: 26px; margin: 0 0 12px; letter-spacing: -.015em; }
.hiw-lede { font-size: 18px; line-height: 1.6; color: var(--navy); margin: 0 0 20px; font-weight: 500; }
.hiw-block p { font-size: 16px; line-height: 1.78; color: var(--navy-soft); margin: 0 0 16px; max-width: 68ch; }
.hiw-block strong { color: var(--navy); font-weight: 600; }
.hiw-block code { font-family: var(--font-mono); font-size: 14px; background: var(--bg-soft); padding: 1px 6px; border-radius: 5px; }
.hiw-aside { border-left: 3px solid var(--teal); padding: 2px 0 2px 18px; margin: 22px 0 0; }
.hiw-aside p { margin: 0; font-size: 15.5px; color: var(--navy); }
.hiw-figure { margin: 0; }
.hiw-diagram { width: 100%; height: auto; color: var(--navy-soft); }
.hiw-box rect { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.hiw-box-key rect { fill: var(--bg-soft); stroke: var(--teal); }
.hiw-box text { text-anchor: middle; font-family: var(--font-body); }
.hiw-h { font-size: 10px; font-weight: 700; letter-spacing: .1em; fill: var(--navy-soft); }
.hiw-t { font-size: 15px; font-weight: 600; fill: var(--navy); }
.hiw-s { font-size: 11.5px; fill: var(--navy-soft); }
.hiw-arrow line { stroke: var(--navy-soft); stroke-width: 1.5; }
.hiw-note { text-anchor: middle; font-size: 11px; font-style: italic; fill: var(--navy-soft); font-family: var(--font-body); }
.hiw-stack { display: none; }
@media (max-width: 720px) {
  /* Below this the SVG scales to roughly 0.45, which renders its labels
     at about 4.5px -- an image of text rather than text. The same three
     parts, stacked, keep real type at a real size. */
  .hiw-diagram { display: none; }
  .hiw-stack { display: block; }
  .hiw-stack-box {
    border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px;
    background: var(--card); text-align: center;
  }
  .hiw-stack-box-key { border-color: var(--teal); background: var(--bg-soft); }
  .hiw-stack .hiw-stack-h { font-size: 11px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--navy-soft); margin: 0 0 6px; }
  .hiw-stack .hiw-stack-t { font-size: 16px; font-weight: 600; color: var(--navy); margin: 0 0 6px; }
  .hiw-stack .hiw-stack-s { font-size: 13px; line-height: 1.6; color: var(--navy-soft); margin: 0; }
  .hiw-stack .hiw-stack-arrow { text-align: center; font-size: 20px; color: var(--navy-soft); margin: 8px 0; }
  .hiw-stack .hiw-stack-note { font-size: 12.5px; font-style: italic; color: var(--navy-soft);
    text-align: center; margin: 14px 0 0; }
}
.hiw-figure figcaption { margin-top: 14px; font-size: 14px; color: var(--navy-soft); text-align: center; }

/* ---------- support ---------- */
/* ---------- buying it (the pre-launch destination of the store CTA) ---------- */

/* Two columns rather than a paragraph: somebody who arrives here has
   just pressed a button that said "buy", and the three things they are
   about to ask are worth answering before they have to type them. */
.buying { padding: 8px 0 20px; }
.buying-card {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 36px;
  align-items: start;
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px 34px;
}
.buying-card h2 { font-family: var(--font-display); font-size: 25px; margin: 0 0 10px; }
.buying-card p { color: var(--navy-soft); margin: 0; line-height: 1.7; }
.buying-points { list-style: none; margin: 0; padding: 0; }
.buying-points li {
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--navy-soft);
}
.buying-points li:first-child { border-top: 0; padding-top: 0; }
.buying-points strong { display: block; color: var(--navy); font-weight: 600; }
@media (max-width: 860px) {
  .buying-card { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 24px 22px; }
  .buying-card h2 { font-size: 21px; }
}

.support { padding: 8px 0 72px; }
.support-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.support-field { margin-bottom: 18px; }
.support-field label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.support-optional { font-weight: 400; color: var(--navy-soft); }
.support-input {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 16px;
  color: var(--navy); background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.support-input:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.support-input.is-invalid { border-color: #ef4444; }
textarea.support-input { resize: vertical; min-height: 130px; }
/* Errors occupy no space until shown, so the form does not jump when one
   appears -- a field moving under the cursor mid-correction is its own
   small usability bug. */
.support-error { display: none; margin-top: 5px; font-size: 13px; color: #b91c1c; }
.support-error.is-shown { display: block; }
.support-send-error { margin-top: 12px; font-size: 14px; color: #b91c1c; line-height: 1.6; }
.support-submit { min-width: 160px; }
.support-fallback { margin-top: 14px; font-size: 13.5px; color: var(--navy-soft); }
/* Hidden from people, reachable by bots. Not display:none -- some bots
   skip those; off-canvas with no tab stop is the convention that works. */
.support-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.support-success {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; background: var(--bg-soft);
}
.support-success h2 { font-family: var(--font-display); font-size: 24px; margin: 0 0 12px; }
.support-success p { color: var(--navy-soft); margin: 0 0 10px; }
.support-aside h2 { font-family: var(--font-display); font-size: 18px; margin: 0 0 12px; }
.support-aside p, .support-aside li { color: var(--navy-soft); font-size: 14.5px; line-height: 1.7; }
.support-aside ul { margin: 0 0 14px; padding-left: 18px; }
.support-aside li { margin-bottom: 10px; }
.support-aside-note { border-top: 1px solid var(--line); padding-top: 14px; }
@media (max-width: 860px) { .support-grid { grid-template-columns: 1fr; } }
.download-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.download-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; background: var(--card);
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.download-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.download-card h2 { font-size: 17px; font-family: var(--font-display); margin: 0; }
.download-card p { font-size: 14.5px; margin: 0; color: var(--navy-soft); }
.download-card .btn { margin-top: 6px; }
/* Pending builds stay legible rather than greyed to the edge of
   readability -- somebody still has to read what they are waiting for. */
.download-card-pending { background: var(--bg-soft); }
.download-badge {
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 999px;
  background: var(--amber-tint); color: #8a5a06;
}
.download-loading, .download-note { color: var(--navy-soft); font-size: 14.5px; }
/* Clear of the last install step, which is a numbered list item and
   otherwise reads as a fifth step. */
.downloads .download-note { margin-top: 40px; }
.download-list .download-note { grid-column: 1 / -1; margin: 4px 0 0; }
.download-help { margin-top: 44px; padding-top: 32px; border-top: 1px solid var(--line); }
.download-help h2 { font-size: 20px; font-family: var(--font-display); margin: 0 0 14px; }
.download-help ol { margin: 0 0 14px; padding-left: 20px; color: var(--navy-soft); font-size: 15px; line-height: 1.7; }
.download-help code { font-family: var(--font-mono); font-size: 13.5px; background: var(--bg-soft); padding: 1px 5px; border-radius: 5px; }
@media (max-width: 720px) { .download-list { grid-template-columns: 1fr; } }
/* A shipped platform reads as shipped: the badge goes green and the
   card gets the accent border the pricing page uses for its recommended
   plan. Somebody scanning four cards should be able to tell in one pass
   which two they can actually download. */
.download-badge.is-live { background: var(--emerald-tint); color: #12703a; }
.download-card.is-ready {
  border: 2px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box, var(--gradient) border-box;
}
.download-meta {
  font-family: var(--font-mono);
  font-size: 12.5px !important;
  letter-spacing: .01em;
  color: var(--navy-soft) !important;
}
.download-steps-link { font-size: 13.5px; font-weight: 600; text-decoration: none; }
.download-steps-link:hover { text-decoration: underline; }

/* ---------- install guides ---------- */
.install-guides { margin-top: 56px; display: grid; gap: 44px; }
.install-guide {
  scroll-margin-top: 96px;
  /* A grid item defaults to `min-width: auto`, which refuses to shrink
     below its content -- so the `sudo apt install ...` line pushed this
     article to 474px inside a 390px phone and the whole page scrolled
     sideways. The `overflow-x: auto` on the code block could never take
     effect until the box it sits in was allowed to be narrower than it.
     Same trap as a flex item; same one-line answer. */
  min-width: 0;
}
.install-steps > li { min-width: 0; }
.install-guide h2 { font-size: 22px; margin-bottom: 20px; }

/* Numbered because these genuinely are a sequence -- step three does not
   work before step two -- and the number is the thing somebody looks for
   when they come back to the page part-way through. */
.install-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.install-steps > li {
  counter-increment: step;
  position: relative;
  padding: 0 0 26px 52px;
  border-left: 1px solid var(--line);
  margin-left: 15px;
}
.install-steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.install-steps > li::before {
  content: counter(step);
  position: absolute;
  left: -15px; top: -2px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: var(--teal-tint); color: var(--teal);
  font-family: var(--font-mono); font-size: 13px; font-weight: 600;
}
.install-steps h3 { font-size: 16px; margin: 0 0 6px; line-height: 1.4; }
.install-steps p { font-size: 14.5px; margin: 0 0 8px; }
.install-steps p:last-child { margin-bottom: 0; }
.install-steps code {
  font-family: var(--font-mono); font-size: 13px;
  background: var(--bg-soft); padding: 1px 5px; border-radius: 5px;
}

/* The "why" line, for the two steps that look alarming: Windows'
   SmartScreen warning and Ubuntu's password prompt. Both are the normal
   behaviour of the operating system and both are where somebody stops
   and closes the installer, so the explanation sits with the step
   rather than in a FAQ they will not reach. */
.install-why {
  font-size: 13.5px !important;
  color: var(--navy-soft);
  border-left: 2px solid var(--line);
  padding-left: 12px;
  margin-top: 10px !important;
}

.install-code {
  margin: 10px 0;
  padding: 12px 14px;
  background: var(--navy);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.install-code code {
  background: none; padding: 0;
  color: #dbe7e6;
  font-family: var(--font-mono);
  font-size: 13px;
  white-space: pre;
}

.install-note {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--amber-tint);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.6;
  color: #6b4708;
}
.install-note strong { color: #55380a; }

@media (max-width: 720px) {
  .install-steps > li { padding-left: 40px; }
}

.feature-group + .feature-group { border-top: 1px solid var(--line); }
.feature-group-title { font-size: 26px; font-family: var(--font-display); margin-bottom: 10px; }
.feature-group-intro { max-width: 720px; margin: 0; color: var(--navy-soft); font-size: 15.5px; line-height: 1.65; }
.feature-group .feature-grid { margin-top: 26px; }
@media (max-width: 980px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .feature-grid { grid-template-columns: 1fr; } }

.feature-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  background: var(--card);
}
/* The reveal animation only exists when JavaScript is there to end it.
   Hiding these unconditionally meant that if app.js failed to load --
   a blocked request, a bad deploy, a corporate proxy -- all 29 feature
   cards stayed at opacity 0 permanently. The words were in the HTML the
   whole time; nobody could see them. Content must not depend on a script
   to become visible. */
.js .feature-card {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
@media (prefers-reduced-motion: reduce) {
  .js .feature-card { transition: none; }
}
.js .feature-card.is-visible { opacity: 1; transform: none; }

.feature-icon { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.feature-icon svg { width: 21px; height: 21px; display: block; }

.feature-icon-teal { background: var(--teal-tint); color: var(--teal); }
.feature-icon-emerald { background: var(--emerald-tint); color: var(--emerald); }
.feature-icon-coral { background: var(--coral-tint); color: var(--coral); }
.feature-icon-amber { background: var(--amber-tint); }

.feature-card h3 { font-size: 17px; margin-bottom: 8px; font-family: var(--font-display); }
.feature-card p { font-size: 14.5px; margin: 0; }

.feature-card-accent { background: var(--navy); border-color: var(--navy); }
.feature-card-accent h3 { color: #fff; }
.feature-card-accent p { color: rgba(255,255,255,0.75); }
.feature-card-accent .feature-icon { background: rgba(255,255,255,0.14); }

/* ---------- system connectivity diagram (home) ---------- */
.connect { padding: 96px 0; background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.connect-diagram { display: flex; align-items: stretch; gap: 0; margin-top: 48px; }

.connect-zone {
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  padding: 22px;
  background: var(--card);
}
.connect-zone-local { flex: 1; }
.connect-zone-cloud { flex: 0 0 280px; display: flex; flex-direction: column; background: var(--navy); border: 1.5px dashed rgba(255,255,255,0.25); }

.connect-zone-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--navy-soft);
  margin: 0 0 18px;
}
.connect-zone-label svg { width: 16px; height: 16px; flex-shrink: 0; }
.connect-zone-label-cloud { color: rgba(255,255,255,0.6); }

.connect-node-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.connect-node {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 18px 16px;
  background: var(--bg-soft);
}
.connect-node-live { background: var(--card); }
.connect-node-building { opacity: 0.72; }
/* Dimming a card is not disclosure -- a buyer reads the words, not the
   alpha channel. Roadmap items say so in text. */
.connect-soon { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px; background: var(--bg-soft); border: 1px dashed var(--line); color: var(--navy-soft); font-family: var(--font-body); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; vertical-align: middle; }
.connect-node h3 { font-size: 15px; margin: 0 0 6px; font-family: var(--font-display); }
.connect-node p { font-size: 13px; margin: 0; color: var(--navy-soft); line-height: 1.5; }

.connect-dot {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.connect-dot-live { background: var(--emerald); animation: connect-pulse 1.8s ease-in-out infinite; }
@keyframes connect-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); }
  50% { box-shadow: 0 0 0 5px rgba(22, 163, 74, 0); }
}

.connect-node-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
  background: var(--teal-tint);
  color: var(--teal);
}
.connect-node-icon svg { width: 17px; height: 17px; }
.connect-node-building .connect-node-icon { background: var(--bg-soft); color: var(--navy-soft); border: 1px dashed var(--line); }

.connect-zone-cloud .connect-node {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.16);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.connect-zone-cloud .connect-node-icon { background: var(--gradient); color: #fff; }
.connect-zone-cloud h3 { color: #fff; font-size: 17px; }
.connect-zone-cloud p { color: rgba(255,255,255,0.65); }
.connect-zone-cloud p a { color: #fff; }

.connect-ai-output {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: #fff !important;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 20px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.connect-ai-output.is-visible { opacity: 1; transform: none; }
.connect-ai-output-icon { color: var(--emerald); flex-shrink: 0; }
.connect-ai-cursor { animation: connect-cursor-blink 1s step-end infinite; }
@keyframes connect-cursor-blink { 50% { opacity: 0; } }

.connect-link {
  position: relative;
  flex: 0 0 130px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

/* The scroll-triggered "watch it work" demo -- a packet representing one
   real timesheet entry travels along the connector line and resolves
   into the actual AI output it would produce. JS (app.js) toggles
   `.is-traveling` once the diagram scrolls into view; this is the only
   place on the page a real "before -> after" is shown in motion, so it
   stays a single deliberate moment rather than a looping effect. */
.connect-packet {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--teal);
  box-shadow: 0 6px 16px -6px rgba(14, 124, 123, 0.4);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--navy);
  white-space: nowrap;
  opacity: 0;
  transition: left 1.1s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
  z-index: 2;
  pointer-events: none;
}
.connect-packet-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); flex-shrink: 0; }
.connect-packet.is-traveling { opacity: 1; left: 100%; }
.connect-packet.is-arrived { opacity: 0; }
.connect-link-line {
  width: 100%;
  height: 2px;
  background-image: linear-gradient(to right, var(--teal) 50%, transparent 50%);
  background-size: 16px 2px;
  background-repeat: repeat-x;
  animation: connect-flow 0.8s linear infinite;
}
@keyframes connect-flow { to { background-position: -16px 0; } }
.connect-link-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--navy-soft);
  text-align: center;
  line-height: 1.5;
}

/* ---------- homepage: three steps ---------- */
.how-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }

.how-photo { width: 100%; height: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); }

.steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.steps li { position: relative; padding-top: 8px; border-top: 2px solid var(--line); }

.step-number { font-family: var(--font-mono); font-weight: 600; color: var(--teal); font-size: 13px; display: block; margin-bottom: 10px; }

/* "See it in the product" cross-links at the end of each mechanism section. */
.hiw-see { font-size: 14.5px; color: var(--navy-soft); }

.steps h3 { font-size: 17px; margin-bottom: 8px; font-family: var(--font-display); }
.steps p { font-size: 14.5px; margin: 0; }
/* Follows .page-hero directly on pricing.html, which already carries the
   section rhythm's bottom spacing -- stacking another full top padding
   on top of it would double the gap. */
.pricing-attached { padding-top: 0; }

/* The "doesn't Odoo already do this?" section. Answering the objection
   before the buyer raises it is worth more than dodging it: they will find
   out either way, and the version where we said it first is the one that
   builds trust. */
.versus { padding: 88px 0; }
.versus-head { max-width: 760px; margin-bottom: 36px; }
.versus-head h2 { margin-bottom: 14px; }
.versus-sub { font-size: 17px; line-height: 1.65; color: var(--navy-soft); margin: 0; }
.versus-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.versus-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; }
.versus-card-ours { border: 2px solid transparent; background: linear-gradient(var(--card), var(--card)) padding-box, var(--gradient) border-box; }
.versus-card h3 { font-size: 18px; font-family: var(--font-display); font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.versus-for { font-size: 13px; color: var(--navy-soft); margin-bottom: 18px; font-style: italic; }
.versus-card ul { list-style: none; margin: 0; padding: 0; }
.versus-card li { position: relative; padding: 8px 0 8px 26px; font-size: 14.5px; line-height: 1.55; color: var(--navy); border-bottom: 1px solid var(--line); }
.versus-card li:last-child { border-bottom: 0; }
.versus-card li::before { content: "—"; position: absolute; left: 0; color: var(--navy-soft); }
.versus-card li.versus-no::before { content: "×"; color: #ef4444; font-weight: 700; }
.versus-card li.versus-yes::before { content: "✓"; color: var(--emerald-text); font-weight: 700; }
.versus-note { margin-top: 26px; font-size: 15px; line-height: 1.65; color: var(--navy-soft); max-width: 70ch; }

/* The privacy section on index.html -- the one claim no competitor can
   copy without rebuilding their product, so it gets its own band rather
   than a bullet in a feature grid. */
.privacy { padding: 88px 0; background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.privacy-head { max-width: 760px; margin-bottom: 40px; }
.privacy-demo-link { margin: 0 0 18px; font-size: 15px; }
.privacy-demo-link a { font-weight: 600; color: var(--teal); text-decoration: none; }
.privacy-demo-link a:hover { text-decoration: underline; }
.privacy-head h2 { margin-bottom: 14px; }
.privacy-sub { font-size: 17px; line-height: 1.65; color: var(--navy-soft); margin: 0; }
.privacy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }

/* Six cards, so the column count is stated rather than inferred.
   `auto-fit` with a minmax floor decides the count from the container
   width, which at some widths leaves a lone card stretched across a full
   row -- the section then reads as five cards and a mistake. */
.uses { padding: 80px 0; border-bottom: 1px solid var(--line); }
.uses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px) { .uses-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .uses-grid { grid-template-columns: 1fr; } }
.privacy-card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; }
.privacy-card-icon {
  width: 40px; height: 40px; border-radius: 11px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--teal-tint); color: var(--teal);
}
.privacy-card-icon svg { width: 21px; height: 21px; display: block; }
.uses-grid .privacy-card:nth-child(3n+2) .privacy-card-icon { background: var(--emerald-tint); color: var(--emerald); }
.uses-grid .privacy-card:nth-child(3n) .privacy-card-icon { background: var(--coral-tint); color: var(--coral); }
.privacy-card h3 { font-size: 17px; font-family: var(--font-display); font-weight: 600; color: var(--navy); margin-bottom: 8px; }
.privacy-card p { font-size: 14.5px; line-height: 1.6; color: var(--navy-soft); margin: 0; }
.privacy-note { margin-top: 28px; font-size: 14px; line-height: 1.6; color: var(--navy-soft); max-width: 70ch; opacity: 0.9; }

.price-card .btn { width: 100%; }

/* ---------- faq ---------- */
.faq-list { margin-top: 36px; max-width: 68ch; }

.faq-item { border-top: 1px solid var(--line); padding: 18px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--line); }

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-family: var(--font-display);
  font-size: 15.5px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--font-mono); color: var(--teal); font-size: 20px; flex-shrink: 0; margin-left: 16px; }
.faq-item[open] summary::after { content: "\2212"; }

.faq-item p { margin-top: 14px; font-size: 14.5px; }

/* ---------- closing ---------- */
.closing { background: var(--navy); position: relative; overflow: hidden; }
.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(420px 320px at 15% 20%, rgba(14, 124, 123, 0.45), transparent 70%),
    radial-gradient(420px 320px at 85% 80%, rgba(22, 163, 74, 0.35), transparent 70%);
}
.closing-inner { text-align: center; max-width: 46ch; margin: 0 auto; position: relative; z-index: 1; }
.closing h2 { color: #fff; }
.closing p { color: rgba(255, 255, 255, 0.72); font-size: 15.5px; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 28px 0; }
.footer-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--navy-soft); }
.footer-row a { color: var(--navy-soft); }

/* ---------- start dialog ---------- */

#start-domain, #hero-domain {
  width: 100%;
  font: inherit;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--navy);
}

/* ---------- secondary-page hero (features/pricing) ---------- */
.page-hero { padding: 56px 0 48px; }
.page-hero-inner { max-width: 62ch; }
.page-hero h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); max-width: 20ch; }

.tour-more { text-align: center; margin: 28px 0 0; }
.tour-more a { font-weight: 600; text-decoration: none; }
.currency-toggle button.is-active { background: var(--card); color: var(--navy); box-shadow: 0 4px 10px -4px rgba(31, 42, 55, 0.25); }
.auth-tab.is-active { background: var(--card); color: var(--navy); box-shadow: 0 4px 10px -4px rgba(31, 42, 55, 0.25); }

/* ---------- responsive ---------- */
@media (max-width: 1120px) {
  /* Mobile navigation.
     Previously the nav was simply display:none below 860px with nothing
     in its place, so seven of the eight pages were unreachable from the
     header on a phone -- only the footer linked them. */
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 11px; margin-right: -8px;
    background: none; border: 0; cursor: pointer; flex-shrink: 0;
  }
  .nav-toggle-bar {
    display: block; height: 2px; width: 100%; border-radius: 2px;
    background: var(--navy); transition: transform .2s ease, opacity .2s ease;
  }
  /* The bars become an X while open, so the same control visibly closes
     what it opened rather than looking like a second, unrelated button. */
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; gap: 0;
    background: var(--card); border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 32px -20px rgba(31, 42, 55, .35);
    padding: 6px 16px 14px;
  }
  .site-nav.is-open { display: flex; }
  /* 48px rows: a nav people tap in a moving vehicle, not a menu bar. */
  .site-nav a {
    display: flex; align-items: center; min-height: 48px;
    font-size: 16px; color: var(--navy);
    border-bottom: 1px solid var(--line-soft, var(--line));
  }
  .site-nav a:last-child { border-bottom: 0; }
  .site-nav a[aria-current="page"] { color: var(--teal); font-weight: 600; }
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 420px; margin: 0 auto; }
  /* The photo is capped at 420px from here down, so the card has to come
     down with it or it starts eating the picture. */
  .hero-float-card { min-width: 0; padding: 14px 15px; }
  .hero-float-card .mock-time { font-size: 19px; }
  .how-grid { grid-template-columns: 1fr; }
  .how-photo { max-height: 260px; order: -1; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .connect-diagram { flex-direction: column; }
  .connect-zone-cloud { flex-basis: auto; }
  .connect-link { flex-direction: row; flex-basis: auto; padding: 20px 0; }
  .connect-link-line { width: auto; flex: 1; height: 2px; }
  .steps { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }

  .mock-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .versus { padding: 64px 0; }
  .versus-grid { grid-template-columns: 1fr; }
  .privacy { padding: 64px 0; }
  .privacy-grid { grid-template-columns: 1fr; }
  .cost-lines li { flex-direction: column; gap: 8px; }
  .cost-figure { font-size: 24px; }
  .cost-figure span { text-align: left; }
  .cost-breakdown { padding: 22px 20px; }
  /* The header is brand + "Get started" on mobile (the nav is already
     hidden at 960px). At 375px the default 24px wrap padding and 24px
     flex gap pushed the button a few pixels past the viewport, giving
     every page a horizontal scrollbar -- tighten both and let the brand
     shrink rather than the button overflow. */
  .wrap { padding: 0 16px; }
  .header-row { gap: 12px; }
  .brand { min-width: 0; }
  .header-row .btn { flex-shrink: 0; }
  /* The card was a fixed 197x210 at every width while the photo behind
     it shrank, so it went from covering a fifth of the picture on a
     desktop to two fifths on a phone. It scales down with the photo
     now. */
  .hero-float-card {
    left: 8px;
    bottom: -16px;
    min-width: 0;
    padding: 12px 13px;
    border-radius: 12px;
  }
  .hero-float-card .mock-label { font-size: 9px; margin-bottom: 7px; }
  .hero-float-card .mock-time { font-size: 17px; margin-bottom: 6px; }
  .hero-float-card .mock-badge { font-size: 10px; padding: 2px 7px; }
  .hero-mood-row { gap: 7px; margin-top: 9px; padding-top: 9px; }
  .hero-mood-emoji { font-size: 16px; }
  .hero-mood-text strong { font-size: 11px; }
  .hero-mood-text span { font-size: 10px; }
  .hero-mood-caption { font-size: 9px; margin-top: 5px; }
  .feature-grid { grid-template-columns: 1fr; }
  .connect-node-grid { grid-template-columns: 1fr; }
  .hero { padding: 40px 0 56px; }
  section { padding: 64px 0; }
  .tour { padding: 64px 0; }
  .calc-section { padding: 0 0 64px; }
  .footer-row { flex-direction: column; gap: 8px; }
  .portal-summary { align-items: flex-start; }
  .device-table { display: block; overflow-x: auto; }
}

@media (max-width: 560px) {
  /* The header CTA is a rigid 148px and the toggle 44px, so on a phone
     the wordmark absorbed the entire shortfall and clipped mid-word --
     "Zeetavix Wor" with the button sitting over the rest of it. The
     action is not lost: it is the first thing in the hero and the last
     thing in the menu panel, both at full width and easier to hit than
     a 148px pill wedged against a logo. */
  .header-row > .btn { display: none; }
  /* `flex`, not `block`. `.btn` centres its label with flexbox, and this
     used to override that on a `<button>`, which centres text anyway.
     Now that it is an anchor, `block` would leave the label hard against
     the left edge of a full-width pill. */
  .nav-cta { display: flex; width: 100%; margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  /* Not "no animation" -- the end state, at once. A reader who asked the
     OS for less motion still needs to see the bar's value. */
  .js .use-card:not(.is-live) .demo-typing { width: 100%; }
  .js .use-card:not(.is-live) .demo-fill { width: 100%; }
  .js .use-card:not(.is-live) .demo-bar-fill { width: 68%; }
  .js .demo-fill, .js .demo-bar-fill { transition: none; }
  .js .use-card.is-live .demo-typing { animation: none; }
}

/* ---------- the guide ---------- */

/* A chapter index. Each card leads with the screen it is about, because
   somebody looking for "the one with the money on it" recognises the
   picture long before they recognise our name for it. */
.guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 8px; }
.guide-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); overflow: hidden; text-decoration: none;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.guide-card:hover {
  transform: translateY(-2px);
  border-color: var(--teal);
  box-shadow: 0 24px 44px -28px rgba(31, 42, 55, .45);
}
.guide-card-thumb {
  display: block; width: 100%;
  /* 16:10, because that is exactly what the captures are (1680x1050).
     It was 16:9, which quietly sliced the bottom off every dashboard --
     the cards were showing a crop of the screen rather than the screen.
     Any box whose ratio is not the capture's is a crop, however
     carefully the object-position is chosen. */
  aspect-ratio: 16 / 10;
  /* `height: auto` is load-bearing: the <img> carries width/height
     attributes for layout stability, and without this the attribute wins
     and every thumbnail renders at its full 1050px. */
  height: auto;
  object-fit: cover; object-position: top center;
  border-bottom: 1px solid var(--line); background: #0f161c;
}
.guide-card-body { padding: 22px 24px 26px; }
.guide-card h2 { font-size: 17.5px; margin: 0 0 6px; }
.guide-card p { font-size: 14.5px; line-height: 1.6; margin: 0; }
.guide-card-more {
  display: inline-block; margin-top: 14px;
  font-size: 13.5px; font-weight: 600; color: var(--teal);
}

/* The article itself. Narrow measure for the prose, but the screenshots
   are allowed to break out of it -- a dashboard reproduced at 65
   characters wide is a picture of a dashboard, not a readable one. */
.guide-article { padding: 8px 0 80px; }
.guide-body { max-width: 68ch; }
.guide-body h2 { font-size: 24px; margin: 52px 0 14px; }
.guide-body h3 { font-size: 18px; margin: 34px 0 10px; }
.guide-body p { font-size: 16px; line-height: 1.7; }
.guide-body ul, .guide-body ol { margin: 0 0 20px; padding-left: 22px; color: var(--navy-soft); font-size: 15.5px; line-height: 1.7; }
.guide-body li { margin-bottom: 8px; }
.guide-body li strong { color: var(--navy); }
.guide-body code {
  font-family: var(--font-mono); font-size: 13.5px;
  background: var(--bg-soft); padding: 1px 6px; border-radius: 5px; color: var(--navy);
}
.guide-lede { font-size: 18px !important; line-height: 1.65; color: var(--navy-soft); }

/* A screenshot, framed so it reads as a window rather than as an image
   dropped into the page. Full width of the wrap, not of the prose. */
.shot { margin: 34px 0 40px; max-width: none; }
.shot-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 30px 60px -34px rgba(31, 42, 55, .45);
}
.shot-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 14px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.shot-dot { width: 10px; height: 10px; border-radius: 999px; background: #d8e2e1; }
.shot-path {
  margin-left: 8px;
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--navy-soft);
}
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption {
  margin-top: 12px;
  font-size: 13.5px; line-height: 1.6; color: var(--navy-soft);
}

/* Two things worth calling out mid-article, and only two, so that
   neither becomes wallpaper: a thing worth knowing, and a thing that
   will bite. */
.guide-note, .guide-warn {
  margin: 28px 0; padding: 18px 20px;
  border-radius: var(--radius-sm);
  font-size: 14.5px; line-height: 1.65;
}
.guide-note { background: var(--teal-tint); color: #0a5c5b; }
.guide-warn { background: var(--amber-tint); color: #6b4708; }
.guide-note strong, .guide-warn strong { display: block; margin-bottom: 4px; }
.guide-note p, .guide-warn p { margin: 0; color: inherit; font-size: inherit; }

/* Where a chapter ends: the next one, not a dead end. */
.guide-next {
  margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center;
}
.guide-next p { margin: 0; font-size: 14.5px; }
.guide-next-label { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--navy-soft); }
.guide-next a { font-family: var(--font-display); font-weight: 600; font-size: 17px; text-decoration: none; }
.guide-next a:hover { text-decoration: underline; }
.guide-prev, .guide-related { flex-basis: 100%; }
.guide-related a, .guide-prev a { font-family: inherit; font-weight: 500; font-size: 14.5px; }

/* Screenshot strip on the marketing pages. Deliberately not a carousel:
   a visitor scanning a landing page should see three screens at once,
   not one at a time behind a control they have to find. */
.showcase { padding: 76px 0; background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.showcase-head { max-width: 60ch; margin-bottom: 34px; }
.showcase-head h2 { margin-bottom: 12px; }
.showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.showcase-item { display: block; text-decoration: none; }
.showcase-item img {
  width: 100%; aspect-ratio: 16 / 10; height: auto;
  object-fit: cover; object-position: top center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card);
  transition: transform .16s ease, box-shadow .16s ease;
}
.showcase-item:hover img { transform: translateY(-2px); box-shadow: 0 22px 40px -26px rgba(31, 42, 55, .5); }
.showcase-item p { margin: 12px 0 0; font-size: 14px; color: var(--navy-soft); }
.showcase-item strong { display: block; color: var(--navy); font-family: var(--font-display); font-size: 15px; margin-bottom: 2px; }
.showcase-more { margin-top: 30px; }

@media (max-width: 860px) {
  .guide-grid { grid-template-columns: 1fr; }
  .showcase-grid { grid-template-columns: 1fr; }
}

/* ---------- how-it-works contents ---------- */

/* Eleven sections is a lot to arrive at by scrolling. Numbered because
   the mechanism is genuinely a sequence, in two columns because a
   single column of eleven is its own wall. */
.hiw-contents {
  list-style: none;
  counter-reset: hiw;
  margin: 30px 0 0;
  padding: 22px 24px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 28px;
}
.hiw-contents li { counter-increment: hiw; }
.hiw-contents a {
  display: block;
  padding: 6px 0;
  font-size: 14.5px;
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.hiw-contents a::before {
  content: counter(hiw);
  display: inline-block;
  width: 2.1em;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--teal);
}
.hiw-contents a:hover { color: var(--teal); }
.hiw-block { scroll-margin-top: 90px; }

@media (max-width: 720px) {
  .hiw-contents { grid-template-columns: 1fr; }
}

/* The chapter number. Positioned over the thumbnail rather than beside
   the title, so the sequence reads at a glance while scanning pictures. */
.guide-card { position: relative; }
.guide-card-step {
  position: absolute; top: 12px; left: 12px; z-index: 1;
  min-width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(15, 22, 28, .82);
  color: #fff;
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600;
  letter-spacing: .02em;
}
.guide-body ol { margin: 0 0 20px; padding-left: 22px; }
.guide-body ol li { margin-bottom: 10px; }

/* ---------- the four-step walk ---------- */

.walk { padding: 84px 0; border-bottom: 1px solid var(--line); }
.walk-list { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 64px; }

/* Copy and screen side by side, alternating, so the eye zig-zags down
   the page instead of running down one rail. */
.walk-step {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 40px;
  align-items: center;
}
.walk-step:nth-child(even) .walk-copy { order: 2; }
.walk-copy h3 { font-size: 22px; margin: 6px 0 10px; }
.walk-copy p { font-size: 15.5px; line-height: 1.65; margin: 0 0 14px; }
.walk-num {
  font-family: var(--font-mono);
  font-size: 12.5px; font-weight: 600; letter-spacing: .06em;
  color: var(--teal);
  margin: 0;
}
.walk-link { font-weight: 600; font-size: 14.5px; text-decoration: none; }
.walk-link:hover { text-decoration: underline; }

.walk-shot { margin: 0; }
.walk-shot img {
  width: 100%;
  aspect-ratio: 16 / 10;
  height: auto;
  object-fit: cover;
  object-position: top center;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #0f161c;
  box-shadow: 0 28px 52px -30px rgba(31, 42, 55, 0.5);
}
.walk-shot figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--navy-soft);
}

@media (max-width: 860px) {
  .walk-step { grid-template-columns: 1fr; gap: 20px; }
  .walk-step:nth-child(even) .walk-copy { order: 0; }
}

/* ---------- desktop app windows ---------- */

/* A native window, not a browser tab: no address bar, no traffic lights,
   and a soft ground behind it so a dark panel does not sit flush on a
   near-white page. The two shots are different heights on purpose --
   they are the same window showing different amounts. */
.app-shot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 36px;
  /* Two narrow windows in a 1160px band read as marooned. The band is
     kept to the width the pair actually needs. */
  max-width: 760px;
  margin: 36px auto 44px;
  padding: 44px 28px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.app-shot { margin: 0; max-width: 300px; }
.app-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 26px 46px -26px rgba(31, 42, 55, 0.55);
}
.app-shot figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--navy-soft);
  text-align: center;
}

/* On the walk-through and the downloads page the window sits beside
   prose rather than in a row of its own. */
.walk-shot img.is-app,
.download-app-shot img {
  aspect-ratio: auto;
  object-fit: contain;
  max-width: 280px;
  margin: 0 auto;
  background: transparent;
  box-shadow: 0 24px 44px -26px rgba(31, 42, 55, 0.5);
}
.download-app-shot { margin: 0 0 26px; text-align: center; }
.download-app-shot figcaption {
  margin-top: 10px; font-size: 13px; color: var(--navy-soft);
}

@media (max-width: 620px) {
  .app-shot-row { padding: 26px 14px; gap: 24px; }
  .app-shot { max-width: 100%; }
}

/* ---------- window chrome for marketing screens ---------- */

/* The guide frames every screenshot as a window; the marketing pages
   dropped them in bare, so the same picture read as two different
   things depending on which page you were on. One treatment now.
   Purely decorative: the bar carries no text a screen reader needs. */
.screen-frame {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 28px 52px -30px rgba(31, 42, 55, 0.5);
}
.screen-frame-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}
.screen-frame-bar span {
  width: 9px; height: 9px; border-radius: 999px; background: #d8e2e1;
}
.screen-frame-bar em {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  color: var(--navy-soft);
}
.screen-frame img { display: block; border-radius: 0; border: 0; box-shadow: none; }

/* Inside a frame the image no longer carries its own edges. */
.walk-shot .screen-frame img,
.showcase-item .screen-frame img { border-radius: 0; }

/* The captions carry a lead-in on the downloads page, so they align
   left rather than centring under uneven windows. */
.downloads .app-shot figcaption { text-align: left; }
.app-shot figcaption strong { color: var(--navy); }

/* A portrait capture in a landscape card. `cover` turned the desktop
   app into a zoomed slice of its own title bar; it is fitted inside the
   box on the app's own dark ground instead. */
.guide-card-thumb.is-portrait {
  object-fit: contain;
  padding: 14px 0;
  background: #0b1014;
}

/* This page's hero carries an eleven-item contents list, and a 62ch
   column squeezed it into two cramped stacks with half the page empty
   beside it. The prose keeps its measure; the list gets the full wrap. */

/* ---------- one left edge down the page ---------- */

/* `.page-hero-inner` and `.hiw-inner` are put on the same element as
   `.wrap`, and `.wrap` is centred with `margin: 0 auto`. Giving them a
   smaller max-width therefore narrowed *the wrap itself* and re-centred
   it, so the hero started 270px to the right of every section below it,
   and on How it works the body started 200px right of its own hero.
   Each block looked fine on its own; together the page had three
   different left edges.

   The wrap keeps its width. The reading measure is set on the text
   inside it, which is what it was for. */
.page-hero-inner,
.hiw-inner { max-width: var(--wrap); }

.page-hero-inner > p,
.page-hero-inner .hero-sub { max-width: 62ch; }

.hiw-inner > * { max-width: 68ch; }
/* Diagrams, screenshots and the contents list are not prose and do not
   want a prose measure. */
.hiw-inner > .shot,
.hiw-inner > .hiw-figure,
.hiw-inner > .hiw-contents { max-width: none; }

/* ---------- progressive disclosure on How it works ---------- */

/* The page was 1,856 words with six per cent of it skimmable. Nothing
   is deleted: each section keeps its heading, its one-line summary and
   its diagram, and the paragraphs sit behind this. The word count is on
   the summary so the reader knows what they are committing to. */
.hiw-more { margin-top: 4px; }
.hiw-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
  padding: 7px 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  color: var(--teal);
}
.hiw-more > summary::-webkit-details-marker { display: none; }
.hiw-more > summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1;
  color: var(--teal);
}
.hiw-more[open] > summary::after { content: "‘2"; }
.hiw-more > summary span {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  color: var(--navy-soft);
}
.hiw-more > summary:hover { text-decoration: underline; }
.hiw-more-body { padding-top: 6px; }
.hiw-more-body > *:last-child { margin-bottom: 0; }

/* A list that reads as a list, without the bullet doing the shouting.
   Used where several paragraphs in a row each opened with a bolded
   lead-in: they were already a list, they just were not marked up as
   one. */
.plain-list { list-style: none; margin: 0 0 20px; padding: 0; }
.plain-list li {
  position: relative;
  padding: 12px 0 12px 22px;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--navy-soft);
}
.plain-list li:last-child { border-bottom: 1px solid var(--line); }
.plain-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 8px;
  height: 2px;
  background: var(--teal);
}
.plain-list li strong { color: var(--navy); }

/* The same contents list without the numbering, for groups that are
   categories rather than a sequence. */
.hiw-contents.is-plain { counter-reset: none; }
.hiw-contents.is-plain a::before { content: none; }
.hiw-contents.is-plain a { padding-left: 0; }
.feature-group { scroll-margin-top: 90px; }


/* Skip to content.
   Nine navigation items sit before the content on every page, and a
   keyboard user had to tab through all of them each time. Hidden until
   focused, which is the one time it is useful. */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  transition: top .12s ease;
}
.skip-link:focus { top: 0; }