/* The product's page, in the hand of opsmavix.com: paper and navy, Fraunces for what is said
   large with an italic word in the accent, Hanken Grotesk to read, IBM Plex Mono for labels. The
   accent is the app's indigo where opsmavix.com has its blue. Every face is the app's own file. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/app/static/vendor/fraunces-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/app/static/vendor/fraunces-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/app/static/vendor/fraunces-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/app/static/vendor/fraunces-latin-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/app/static/vendor/fraunces-latin-500-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-weight: 400;
  font-display: swap;
  src: url('/app/static/vendor/hanken-grotesk-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-weight: 500;
  font-display: swap;
  src: url('/app/static/vendor/hanken-grotesk-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-weight: 600;
  font-display: swap;
  src: url('/app/static/vendor/hanken-grotesk-latin-600-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Hanken Grotesk';
  font-weight: 700;
  font-display: swap;
  src: url('/app/static/vendor/hanken-grotesk-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 400;
  font-display: swap;
  src: url('/app/static/vendor/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 500;
  font-display: swap;
  src: url('/app/static/vendor/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-weight: 600;
  font-display: swap;
  src: url('/app/static/vendor/ibm-plex-mono-latin-600-normal.woff2') format('woff2');
}

:root {
  --paper: #eef0f7;
  --paper-2: #e7eaf4;
  --sand: #dde1f0;
  --card: #fbfcfe;
  --card-2: #f3f5fb;
  --ink: #0e1433;
  --ink-2: #1c2350;
  --ink-deep: #090c22;
  --navy: #11163a;
  --accent: #3b3fc4;
  --accent-press: #2f33a6;
  --accent-on-dark: #9497ff;
  --accent-wash: rgba(59, 63, 196, 0.08);
  --muted: rgba(14, 20, 51, 0.66);
  --line: rgba(14, 20, 51, 0.14);
  --line-soft: rgba(14, 20, 51, 0.08);
  --rule: rgba(14, 20, 51, 0.28);
  --on-dark: #eef0fa;
  --muted-dark: rgba(238, 240, 250, 0.72);
  --line-dark: rgba(238, 240, 250, 0.16);
  --late: #b4261f;
  --late-wash: #fbe9e7;
  --whatsapp: #1f9d55;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', -apple-system, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  --wrap: 1180px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

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

.wrap {
  width: min(100% - 48px, var(--wrap));
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 50;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  top: 12px;
}

/* What is said large: Fraunces, close set, an italic word in the accent. */

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 600;
  font-variation-settings: 'opsz' 96;
}

h1 em,
h2 em,
h3 em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}

h1 {
  font-size: clamp(42px, 5.4vw, 70px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}

h2 {
  font-size: clamp(36px, 4.4vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.028em;
}

h3 {
  font-size: clamp(24px, 2.3vw, 31px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

/* A label set in the mono, spaced, after a short rule. */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: '';
  width: 30px;
  height: 1px;
  background: currentColor;
}

.label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The way in: the accent, square cut, an arrow after. */

.button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 24px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 14px 28px -14px rgba(59, 63, 196, 0.75);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.button::after {
  content: '→';
  transition: transform 0.2s var(--ease);
}

.button:hover {
  background: var(--accent-press);
  transform: translateY(-1px);
  box-shadow: 0 18px 32px -14px rgba(59, 63, 196, 0.85);
}

.button:hover::after {
  transform: translateX(3px);
}

.button.small {
  padding: 10px 16px;
  font-size: 14px;
  box-shadow: none;
}

.button.small::after {
  content: none;
}

.button.light {
  border-color: #fff;
  background: #fff;
  color: var(--ink);
  box-shadow: none;
}

.button.light:hover {
  background: var(--paper);
}

.underlined {
  padding-bottom: 3px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.underlined:hover {
  border-bottom-color: var(--ink);
}

.on-to {
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.on-to:hover {
  text-decoration: underline;
}

/* The logo, as opsmavix.com has it, with the product's name beside it in the mono. */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}

.mark {
  flex: none;
  width: 24px;
  height: 29px;
  fill: currentColor;
}

.mark .b {
  fill: var(--accent);
}

.wordmark {
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.wordmark span {
  color: var(--accent);
}

.brand-erp {
  margin-left: 2px;
  padding: 3px 7px 2px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink);
}

/* The bar over the page. */

.top {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(238, 240, 247, 0.88);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: saturate(140%) blur(10px);
}

.top-row {
  display: flex;
  align-items: center;
  gap: 40px;
  height: 74px;
}

.top-nav {
  display: flex;
  gap: 34px;
  margin-left: auto;
}

.top-nav a {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
}

.top-nav a:hover {
  color: var(--accent);
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}

.sign-in {
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.sign-in:hover {
  color: var(--accent);
}

/* The first view: what it is on the left, the sample company's morning on the right. */

.hero {
  position: relative;
  overflow: hidden;
  padding: 92px 0 104px;
  background:
    radial-gradient(60% 70% at 85% 30%, rgba(59, 63, 196, 0.1), transparent 70%),
    radial-gradient(40% 50% at 10% 90%, rgba(59, 63, 196, 0.05), transparent 70%),
    var(--paper);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}

.hero h1 {
  max-width: 11.5em;
}

.lede {
  max-width: 33em;
  margin: 28px 0 0;
  color: var(--ink-2);
  font-size: 21px;
  line-height: 1.55;
}

.promise {
  margin: 18px 0 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
}

.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 26px;
  margin: 34px 0 0;
}

.hero .on-to {
  display: inline-block;
  margin-top: 22px;
}

/* The sample company's Today, drawn: what it sold, what is owed and what waits, overdue first. */

.console {
  position: relative;
  padding: 26px 0 40px 28px;
}

.console-card {
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: 4px;
  box-shadow: 0 40px 80px -40px rgba(14, 20, 51, 0.45), 0 2px 6px rgba(14, 20, 51, 0.04);
}

.console-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line-soft);
}

.console-head .label:first-child {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
}

.console-head .label:first-child::before {
  content: '';
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--accent);
  transform: rotate(45deg);
}

.console-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
}

.console-figures {
  margin: 0;
  padding: 6px 20px;
  border-right: 1px solid var(--line-soft);
}

.console-figures > div {
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}

.console-figures > div:last-child {
  border-bottom: none;
}

.console-figures dt {
  margin: 0 0 3px;
}

.console-figures dd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin: 0;
}

.console-figures b {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}

.console-figures small {
  color: var(--muted);
  font-size: 12.5px;
}

.console-figures small.late {
  color: var(--late);
  font-weight: 600;
}

.console-queue {
  padding: 16px 18px;
}

.console-queue ol {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.console-queue li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}

.console-queue li:last-child {
  border-bottom: none;
}

.console-queue .doc {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.console-queue .who {
  grid-column: 1;
  color: var(--ink-2);
  font-size: 14px;
}

.console-queue .owed {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.console-queue .late {
  grid-column: 2;
  justify-self: end;
  padding: 1px 7px;
  border-radius: 2px;
  background: var(--late-wash);
  color: var(--late);
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.console-foot {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 11px 20px;
  border-top: 1px solid var(--line-soft);
  background: var(--card-2);
}

/* A note pinned over the card's corner, and the order's way from ordered to paid under it. */

.console-note {
  position: absolute;
  top: 0;
  right: -18px;
  width: 238px;
  margin: 0;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  box-shadow: 0 22px 44px -22px rgba(14, 20, 51, 0.5);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.45;
}

.console-note .label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  color: var(--accent);
}

.console-note .label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.console-flow {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 14px 18px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 22px 44px -22px rgba(14, 20, 51, 0.5);
}

.console-flow li {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 82px;
  padding: 0 8px;
}

.console-flow li + li {
  border-left: 1px solid var(--line-soft);
}

.console-flow .step {
  display: block;
  width: 13px;
  height: 13px;
  border: 2px solid var(--accent);
  border-radius: 50%;
}

.console-flow .whole {
  background: var(--accent);
}

.console-flow .half {
  background: linear-gradient(90deg, var(--accent) 50%, transparent 50%);
}

/* The strip of what is promised, under the first view. */

.facts {
  background: var(--card);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.facts ul {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.facts li {
  padding: 34px 28px;
}

.facts li + li {
  border-left: 1px solid var(--line);
}

.facts li:first-child {
  padding-left: 0;
}

.facts b {
  display: block;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.facts b i {
  margin-right: 6px;
  color: var(--accent);
  font-size: 20px;
  font-weight: 500;
}

.facts span {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

/* Who it is made for, said on navy. */

.made-for {
  padding: 46px 0 50px;
  background: var(--navy);
  color: var(--on-dark);
  text-align: center;
}

.made-for .label {
  color: var(--accent-on-dark);
  letter-spacing: 0.24em;
}

.made-for ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 0;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.made-for li {
  font-family: var(--serif);
  font-size: clamp(21px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.made-for li + li::before {
  content: '·';
  margin: 0 22px;
  color: var(--muted-dark);
}

.made-for p {
  margin: 16px 0 0;
  color: var(--muted-dark);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
}

/* A part of the page, numbered as opsmavix.com numbers its own, the number faint behind it. */

.part {
  position: relative;
  overflow: hidden;
  padding: 190px 0 120px;
}

.part.sand {
  background: var(--sand);
}

.part.paper-2 {
  background: var(--paper-2);
}

.part-number {
  position: absolute;
  top: 28px;
  right: max(24px, calc((100% - var(--wrap)) / 2 - 40px));
  color: rgba(14, 20, 51, 0.055);
  font-family: var(--serif);
  font-size: 180px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
}

.part-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 64px;
  align-items: end;
  position: relative;
}

.part-head p:not(.eyebrow) {
  max-width: 30em;
  margin: 0;
  color: var(--ink-2);
  font-size: 18px;
}

.part-head .label {
  display: block;
  margin-top: 18px;
}

.part-head.single {
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  max-width: 860px;
}

/* Where a growing firm loses the thread: six, under a ruler. */

.ruler {
  height: 12px;
  margin: 64px 0 0;
  border-bottom: 2px solid var(--ink);
  background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 12px) bottom / 100% 8px no-repeat;
}

.leaks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.leaks li {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 4px 18px;
  padding: 34px 40px 34px 0;
  border-bottom: 1px solid var(--line);
}

.leaks li:nth-child(even) {
  padding: 34px 0 34px 40px;
  border-left: 1px solid var(--line);
}

.leaks .n {
  grid-row: span 2;
  color: var(--accent);
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
}

.leaks h3 {
  font-size: 25px;
  font-weight: 600;
}

.leaks p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
}

/* What it does: a real piece of the sample company beside what it is. */

.outcome {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
  padding: 64px 0;
  border-top: 1px solid var(--line);
}

.outcome:first-of-type {
  margin-top: 56px;
}

.outcome.flip {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr);
}

.outcome.flip .piece {
  order: 2;
}

.piece {
  margin: 0;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow: 0 36px 70px -40px rgba(14, 20, 51, 0.5);
}

.piece figcaption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}

.piece figcaption .label:last-child {
  color: var(--accent);
}

.piece img {
  width: 100%;
}

.outcome-copy .label {
  color: var(--accent);
  letter-spacing: 0.2em;
}

.outcome-copy h3 {
  margin: 14px 0 16px;
}

.outcome-copy p:not(.replaces) {
  margin: 0;
  max-width: 30em;
  color: var(--ink-2);
  font-size: 17.5px;
}

.replaces {
  margin: 22px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.replaces b {
  color: var(--ink);
  font-weight: 600;
}

/* Between the spreadsheet and a big ERP: a line across, then the three side by side. */

.spectrum {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  margin: 72px 0 0;
  padding-bottom: 48px;
}

.spectrum::before {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 23px;
  height: 2px;
  background: linear-gradient(90deg, var(--rule), var(--ink));
}

.spectrum > div {
  position: relative;
  display: grid;
  gap: 2px;
}

.spectrum > div::after {
  content: '';
  position: absolute;
  bottom: -28.5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
}

.spectrum > div:first-child::after {
  left: 4px;
  background: var(--rule);
}

.spectrum > div:last-child {
  justify-items: end;
  text-align: right;
}

.spectrum > div:last-child::after {
  right: 4px;
}

.spectrum b {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
}

.spectrum .here {
  justify-items: center;
  text-align: center;
}

.spectrum .here b {
  color: var(--accent);
  font-size: 34px;
  letter-spacing: -0.02em;
}

.spectrum .here .label {
  color: var(--accent);
}

.spectrum .here::after {
  left: calc(50% - 9px);
  bottom: -33px;
  width: 18px;
  height: 18px;
  background: var(--accent);
  box-shadow: 0 0 0 7px rgba(59, 63, 196, 0.16);
}

.compare-scroll {
  overflow-x: auto;
}

.compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  border-top: 2px solid var(--ink);
}

.compare th,
.compare td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  font-size: 16px;
}

.compare thead th {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.compare tbody th {
  width: 22%;
  padding-left: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.compare .ours {
  background: var(--accent-wash);
  color: var(--ink);
  font-weight: 600;
}

.compare thead .ours {
  border-top: 2px solid var(--accent);
  color: var(--accent);
}

.compare tbody .ours::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 10px 2px 0;
  border-radius: 50%;
  background: var(--accent);
}

.not-yet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 40px;
  margin: 64px 0 0;
  padding: 30px 0 0;
  border-top: 1px solid var(--line);
}

.not-yet h3 {
  font-size: 25px;
  font-weight: 600;
}

.not-yet ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.not-yet li {
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--card);
  color: var(--ink-2);
  font-size: 15px;
}

.not-yet p {
  grid-column: 2;
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
}

.not-yet p a {
  color: var(--accent);
  font-weight: 600;
}

/* The plans, a row each, as opsmavix.com sets its prices. */

.period {
  display: inline-flex;
  margin: 36px 0 0;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--card);
}

.period button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--muted);
  font: 600 15px var(--sans);
  cursor: pointer;
}

.period button[aria-pressed='true'] {
  background: var(--ink);
  color: #fff;
}

.save {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.period button[aria-pressed='true'] .save {
  color: var(--accent-on-dark);
}

.plans {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}

.plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 40px;
  padding: 32px 26px;
  border-bottom: 1px solid var(--rule);
}

.plan.featured {
  background: rgba(59, 63, 196, 0.09);
}

.plan h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 29px;
  font-weight: 600;
}

.plan.featured h3::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

.plan .for {
  margin: 0;
  color: var(--ink-2);
  font-size: 16.5px;
}

.plan ul {
  grid-column: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 32px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.45;
}

.plan li {
  position: relative;
  padding-left: 18px;
}

.plan li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--accent);
}

.price {
  grid-row: 1 / span 3;
  grid-column: 2;
  align-self: center;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  white-space: nowrap;
}

.price span {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(38px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: lining-nums;
}

.price small {
  color: var(--accent);
  font-family: var(--serif);
  font-size: 19px;
  font-style: italic;
  font-weight: 500;
}

.plans-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 18px 40px;
  margin: 30px 0 0;
}

.plans-foot p {
  max-width: 34em;
  margin: 0;
  color: var(--ink-2);
  font-size: 16px;
}

/* The questions asked first. */

.questions-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 72px;
  align-items: start;
}

.questions-grid > div:first-child p {
  margin: 22px 0 0;
  color: var(--ink-2);
  font-size: 17px;
}

.questions-grid > div:first-child p a {
  color: var(--accent);
  font-weight: 600;
}

details {
  border-bottom: 1px solid var(--rule);
}

details:first-child {
  border-top: 2px solid var(--ink);
}

summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  content: '+';
  flex: none;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 400;
  transition: transform 0.2s var(--ease);
}

details[open] summary::after {
  transform: rotate(45deg);
}

details p {
  margin: -6px 0 26px;
  max-width: 38em;
  color: var(--ink-2);
  font-size: 17px;
}

details p a {
  color: var(--accent);
  font-weight: 600;
}

/* The way in again, on navy, with a person to talk to. */

.close {
  position: relative;
  overflow: hidden;
  padding: 130px 0 120px;
  background:
    radial-gradient(50% 80% at 80% 10%, rgba(148, 151, 255, 0.18), transparent 70%),
    linear-gradient(rgba(238, 240, 250, 0.035) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, rgba(238, 240, 250, 0.035) 1px, transparent 1px) 0 0 / 64px 64px,
    var(--navy);
  color: var(--on-dark);
}

.close .eyebrow {
  color: var(--accent-on-dark);
}

.close h2 {
  max-width: 13em;
  color: #fff;
}

.close h2 em {
  color: var(--accent-on-dark);
}

.close > .wrap > p:not(.eyebrow, .cta) {
  max-width: 34em;
  margin: 26px 0 0;
  color: var(--muted-dark);
  font-size: 19px;
}

.close .underlined {
  border-bottom-color: var(--line-dark);
  color: #fff;
}

.ways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 72px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-dark);
}

.ways li {
  padding: 26px 26px 0 0;
}

.ways li + li {
  padding-left: 26px;
  border-left: 1px solid var(--line-dark);
}

.ways .label {
  display: block;
  color: var(--accent-on-dark);
}

.ways a {
  display: inline-block;
  margin-top: 8px;
  color: #fff;
  font-family: var(--serif);
  font-size: 23px;
  font-weight: 500;
  text-decoration: none;
}

.ways a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.ways small {
  display: block;
  margin-top: 4px;
  color: var(--muted-dark);
  font-size: 14px;
}

/* The foot of the page. */

.foot {
  padding: 72px 0 40px;
  background: var(--ink-deep);
  color: var(--muted-dark);
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.foot .brand {
  color: #fff;
}

.foot .mark .b,
.foot .wordmark span {
  fill: var(--accent-on-dark);
  color: var(--accent-on-dark);
}

.foot .brand-erp {
  border-color: var(--line-dark);
  color: var(--on-dark);
}

.foot-grid > div:first-child p {
  max-width: 24em;
  margin: 18px 0 0;
  font-size: 15px;
  line-height: 1.6;
}

.foot h2 {
  margin: 0 0 18px;
  color: var(--muted-dark);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.foot ul {
  display: grid;
  gap: 11px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot ul a {
  color: var(--on-dark);
  font-size: 15px;
  text-decoration: none;
}

.foot ul a:hover {
  color: #fff;
  text-decoration: underline;
}

.foot-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  margin-top: 64px;
  padding-top: 26px;
  border-top: 1px solid var(--line-dark);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.foot-base p {
  max-width: 44em;
  margin: 0;
}

/* WhatsApp, as opsmavix.com offers it, in the corner. */

.whatsapp-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
  background: var(--whatsapp);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 14px 30px -12px rgba(9, 12, 34, 0.55);
}

.whatsapp-float svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.whatsapp-float:hover {
  background: #198a4a;
}

/* Narrower: the bar keeps its way in, the columns stack, and nothing is wider than the screen. */

@media (max-width: 1080px) {
  .top-nav {
    display: none;
  }

  .top-actions {
    margin-left: auto;
  }

  .hero-grid,
  .part-head,
  .outcome,
  .outcome.flip,
  .questions-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  .outcome.flip .piece {
    order: 0;
  }

  .console {
    max-width: 640px;
  }

  .console-note {
    right: 0;
  }

  .facts ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .facts li:nth-child(3) {
    padding-left: 0;
    border-left: none;
  }

  .facts li:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .foot-grid > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  body {
    font-size: 17px;
  }

  .wrap {
    width: min(100% - 32px, var(--wrap));
  }

  .top-row {
    height: 64px;
    gap: 16px;
  }

  .sign-in {
    display: none;
  }

  .top .button.small {
    padding: 9px 13px;
    font-size: 13.5px;
  }

  .wordmark {
    font-size: 21px;
  }

  .hero {
    padding: 56px 0 72px;
  }

  .lede {
    font-size: 18.5px;
  }

  .console {
    padding: 22px 0 64px;
  }

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

  .console-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    border-right: none;
    border-bottom: 1px solid var(--line-soft);
  }

  .console-figures > div {
    border-bottom: none;
  }

  .console-figures b {
    font-size: 22px;
  }

  .console-figures dd {
    display: grid;
    gap: 0;
  }

  .console-note {
    position: relative;
    right: auto;
    width: auto;
    margin: 0 0 16px;
  }

  .console-flow {
    left: 12px;
    right: 12px;
    justify-content: space-between;
  }

  .console-flow li {
    min-width: 0;
    flex: 1;
  }

  .facts li,
  .facts li:first-child {
    padding: 24px 16px 24px 0;
  }

  .facts li:nth-child(even) {
    padding-left: 16px;
  }

  .facts b {
    font-size: 28px;
  }

  .made-for ul {
    flex-direction: column;
    gap: 6px;
  }

  .made-for li + li::before {
    content: none;
  }

  .compare {
    min-width: 0;
  }

  .compare thead {
    display: none;
  }

  .compare tr {
    display: grid;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
  }

  .compare tbody th,
  .compare td {
    width: auto;
    padding: 4px 0;
    border-bottom: none;
  }

  .compare tbody th {
    margin-bottom: 6px;
  }

  .compare td::before {
    content: attr(data-label) ': ';
    color: var(--muted);
    font-weight: 500;
  }

  .compare .ours {
    margin: 2px -10px;
    padding: 6px 10px;
  }

  .compare tbody .ours::before {
    content: attr(data-label) ': ';
    display: inline;
    width: auto;
    height: auto;
    margin: 0;
    border-radius: 0;
    background: none;
    color: var(--accent);
  }

  .part {
    padding: 128px 0 84px;
  }

  .part-number {
    top: 18px;
    font-size: 110px;
  }

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

  .leaks li,
  .leaks li:nth-child(even) {
    grid-template-columns: 52px 1fr;
    padding: 26px 0;
    border-left: none;
  }

  .leaks .n {
    font-size: 32px;
  }

  .outcome {
    padding: 48px 0;
  }

  .spectrum {
    grid-template-columns: 1fr 1fr;
    row-gap: 18px;
  }

  .spectrum .here {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .spectrum::before,
  .spectrum > div::after {
    display: none;
  }

  .spectrum {
    padding-bottom: 28px;
  }

  .not-yet {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .not-yet p {
    grid-column: 1;
  }

  .plan {
    grid-template-columns: minmax(0, 1fr);
    padding: 26px 0;
  }

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

  .plan.featured {
    margin-inline: -16px;
    padding-inline: 16px;
  }

  .price {
    grid-row: auto;
    grid-column: 1;
    margin-top: 6px;
  }

  summary {
    font-size: 19px;
  }

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

  .ways li,
  .ways li + li {
    padding: 22px 0;
    border-left: none;
    border-bottom: 1px solid var(--line-dark);
  }

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

  .whatsapp-float span {
    display: none;
  }

  .whatsapp-float {
    padding: 13px;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}