/* ============================================================================
   MonkSuite product site — redesign (ScrapeMonk)
   Implemented from the Claude Design project "ScrapeMonk design system",
   file `ScrapeMonk Home.dc.html`.

   ---------------------------------------------------------------------------
   THEMING CONTRACT — read this before porting the design to another product.
   ---------------------------------------------------------------------------
   Everything below the BRAND TOKENS block is written *only* in terms of custom
   properties. To ship this design for PriceMonk / TidyMonk / MatchMonk you copy
   this file and rewrite the token block — nothing else.

   `--brand-rgb` exists because the design's dot-grids and glows are rgba()
   washes of the brand colour. Keeping the channels as a bare triple lets every
   one of those washes stay themeable via rgba(var(--brand-rgb), <alpha>);
   a hex token could not be used that way.

   Per-product brand colour, taken from each product's own pictogram:
     ScrapeMonk  #c182fd  (193,130,253)   TidyMonk   #818bf9  (129,139,249)
     MatchMonk   #fc7186  (252,113,134)   PriceMonk  #00b5d4  (  0,181,212)
   ============================================================================ */

/* ============================================================================
   SHARED BASE — one copy for the whole estate. Do not fork this file.
   Every colour, font and metric comes from a custom property defined in each
   site's own /theme.css, so a new product site is a token block, not a rewrite.
   deploy.sh copies this directory into every site at /shared/, which is why
   there is no per-site duplicate to drift out of step.
   ============================================================================ */

/* --------------------------- Reset / base --------------------------- */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

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

input,
textarea {
  font-family: inherit;
}

::selection {
  background: var(--brand);
  color: var(--btn-ink);
}

.txtlink {
  color: var(--brand-2);
  transition: color 0.2s;
}

.txtlink:hover {
  color: var(--brand-3);
}

/* Keyboard focus. The source design only styled :focus on inputs and removed
   the ring elsewhere, which left keyboard users with no visible focus at all. */
:focus-visible {
  outline: 3px solid var(--brand-3);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--brand);
  color: var(--btn-ink);
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}

/* ------------------------------ Layout ------------------------------ */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
}

.section {
  padding: 40px var(--gutter) 96px;
}

.section--anchored {
  scroll-margin-top: 84px;
}

/* Dotted / gridded section washes */
.dots {
  background-image: radial-gradient(rgba(var(--brand-rgb), 0.09) 1.3px, transparent 1.3px);
  background-size: 26px 26px;
}

.dots--soft {
  background-image: radial-gradient(rgba(var(--brand-rgb), 0.07) 1.3px, transparent 1.3px);
  background-size: 28px 28px;
}

.grid-wash {
  position: relative;
  background-image: linear-gradient(rgba(var(--brand-rgb), 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--brand-rgb), 0.04) 1px, transparent 1px),
    radial-gradient(rgba(var(--brand-rgb), 0.12) 1.6px, transparent 1.6px);
  background-size: 44px 44px, 44px 44px, 44px 44px;
}

/* Section header: eyebrow left, hint right, rule under */
.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
  margin-bottom: 44px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label);
}

.eyebrow--hint {
  color: var(--ink-6);
  text-align: right;
}

/* ------------------------------ Type ------------------------------ */
.h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.gradient-text {
  color: var(--ink);
}

.lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-3);
  text-wrap: pretty;
}

.muted {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-4);
  text-wrap: pretty;
}

/* ----------------------------- Buttons ----------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  /* Explicit, because a <button> otherwise inherits the UA's ButtonFace
     background: .btn--ghost on a <button> rendered as a white pill with
     near-invisible light text. Variants that want a fill set their own. */
  background: transparent;
  color: var(--ink);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  transition: filter 0.2s, transform 0.2s, border-color 0.2s;
}

.btn--primary {
  background: var(--brand);
  color: var(--btn-ink);
  padding: 16px 32px;
}

.btn--primary:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

.btn--ghost {
  border-color: var(--border-strong);
  color: var(--ink);
  padding: 16px 28px;
}

.btn--ghost:hover {
  border-color: var(--brand-2);
}

.btn--light {
  background: #fff;
  color: var(--cta-ink);
  font-weight: 700;
  padding: 17px 34px;
}

.btn--light:hover {
  transform: translateY(-2px);
}

.btn--nav {
  background: var(--brand);
  color: var(--btn-ink);
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
}

.btn--nav:hover {
  filter: brightness(1.08);
}

.btn--block {
  width: 100%;
  padding: 15px 24px;
}

/* ------------------------------- Nav ------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

/* The nav is the one block whose gutter lives inside its own box rather than on
   a parent section, so the box has to be the content column *plus* the gutters
   for the logo to land on the same line as every section below it. */
.nav__inner {
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
}

/* The full product logo (reversed full-colour variant, per the style guides),
   served from Cloudinary. Same heights as the MonkSuite wordmark. */
.brand__logo {
  display: block;
  height: 22px;
  width: auto;
}

.footer .brand__logo {
  height: 24px;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 14.5px;
  font-weight: 500;
}

.nav__link {
  color: var(--ink-4);
  transition: color 0.2s;
}

.nav__link:hover {
  color: var(--ink);
}

.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 10px;
  margin-right: -10px;
  background: none;
  border: 0;
  cursor: pointer;
}

.nav__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s;
}

.nav.open .nav__toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav.open .nav__toggle span:nth-child(2) {
  opacity: 0;
}

.nav.open .nav__toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ------------------------------- Hero ------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 118px var(--gutter) 104px;
}

.hero__grid,
.hero__glow {
  position: absolute;
  pointer-events: none;
}

/* Two dot layers, the same construction as the monksuite.io hero: a base field
   fading out towards the bottom, and a brighter cluster in one corner. */
.hero__grid {
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.5px, transparent 1.5px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.38) 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.38) 58%, transparent 100%);
}

.hero__glow {
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.44) 1.7px, transparent 1.7px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(circle 440px at 15% 10%, #000, transparent 68%);
  mask-image: radial-gradient(circle 440px at 15% 10%, #000, transparent 68%);
}

.hero__inner {
  position: relative;
  max-width: var(--wrap);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-5);
  margin-bottom: 26px;
}

.pill__dot {
  display: none;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 26px;
  max-width: 17ch;
  text-wrap: balance;
}

.hero__sub {
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 54ch;
  margin: 0 0 40px;
  text-wrap: pretty;
}

.hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ---------------------------- Demo video ---------------------------- */
.video {
  padding: 0 var(--gutter) 96px;
}

.video__frame {
  max-width: 1000px;
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.6);
  background: var(--surface);
}

.video__frame video {
  display: block;
  width: 100%;
  height: auto;
  background: var(--bg);
}

.video__caption {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-6);
  margin-top: 18px;
}

/* ------------------------- Inverted light panel ------------------------- */
.panel {
  background: var(--panel);
  color: var(--panel-ink);
  border-radius: 24px;
  padding: 72px 56px;
}

.panel--tight {
  padding: 64px 56px;
}

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

.panel__split--narrow {
  grid-template-columns: 0.9fr 1.1fr;
}

.panel__h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 38px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

.panel__body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--panel-ink-2);
  margin: 0 0 16px;
  text-wrap: pretty;
}

.panel__body--accent {
  color: var(--panel-accent);
  font-weight: 600;
  margin: 0;
}

.panel__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--panel-accent);
  margin-bottom: 18px;
}

/* Trust badge grid inside the light panel */
.badges {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.badge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel-card);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 18px 20px;
  font-size: 15px;
  font-weight: 500;
}

.badge__tick {
  color: var(--panel-accent);
  font-weight: 700;
  flex: none;
}

/* --------------------------- Two-column split --------------------------- */
.split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}

.split--even {
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

/* Used once per site, for the "built from real-world experience" row: a short
   two-paragraph column beside a taller stack of pills. Top-aligned it left the
   text hanging above the stack's baseline, which Petra flagged — centred, the
   two columns read as one block whichever one happens to be taller. */
.split--wide-left {
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
}

/* --------------------------- Numbered list --------------------------- */
.numlist {
  display: flex;
  flex-direction: column;
}

.numlist__row {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.numlist__row:last-child {
  border-bottom: 0;
}

.numlist__n {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brand-2);
  padding-top: 2px;
  flex: none;
}

.numlist__t {
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ------------------------------ Card grid ------------------------------ */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.cards--2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.card {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  background: var(--surface);
  transition: border-color 0.2s;
}

.card:hover {
  border-color: var(--brand-2);
}

.card__n {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--label);
  margin-bottom: 18px;
}

.card__t {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* Highlight pair under the capability grid */
.highlights {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 16px;
}

.highlight {
  border-radius: 14px;
  padding: 30px 32px;
  background: var(--brand);
  display: flex;
  align-items: center;
  gap: 18px;
}

.highlight__n {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--btn-ink);
  opacity: 0.8;
  flex: none;
}

.highlight__t {
  font-size: 16px;
  line-height: 1.5;
  color: var(--btn-ink);
  margin: 0;
  font-weight: 600;
}

/* The second panel used to be a pale tint of the brand (--brand-3) next to the
   saturated one; Petra and Anna both read the pair as two mismatched colours,
   so the row is one colour now — the darker of the two, per Petra. The modifier
   survives only as a hook for the supporting sentence's lighter type, which is
   all that separates it from the lead statement. */
.highlight--light p {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: var(--btn-ink);
  font-weight: 500;
  text-wrap: pretty;
}

/* ---------------------------- Step cards ---------------------------- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}

.step {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  background: var(--surface);
}

.step__n {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border-strong);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--label);
  margin-bottom: 24px;
}

.step__t {
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}

.step--final {
  position: relative;
  overflow: hidden;
  background: rgba(var(--brand-rgb), 0.1);
  border-color: var(--border-strong);
}

.step__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.step--final .step__n {
  background: var(--brand);
  border-color: transparent;
  color: var(--btn-ink);
  margin-bottom: 0;
}

.step--final .step__t {
  position: relative;
  color: #fff;
  font-weight: 600;
}

.step__mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

/* --------------------- Step sequence: N steps on one row (four by default) -------------
   TidyMonk's "typical scenario" — the one step sequence that deliberately
   leaves the three-column .steps grid (it is .seq, not .flow: base.css
   already has an unrelated .flow component, the implementation flow), because it is a sequence: three states
   of the problem and then the resolution, read left to right, and a fourth
   card wrapping alone onto a second row broke exactly that reading. Icon
   circles joined by real arrows (a shaft and a head), the last circle filled
   to mark the resolution. The pre-redesign site drew this with a connector
   line, an auto-advancing highlight and a pulse ring; the ring and glow are
   the pattern WI5-2 removed site-wide, so this version is static. Below
   900px the row becomes a column and the arrows turn to point down. */
.seq {
  --seq-gap: 24px;
  --seq-r: 44px; /* icon-circle radius; the arrows are positioned off it */
  --seq-cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--seq-cols), 1fr);
  gap: var(--seq-gap);
  margin: 0;
  padding: 0;
}

.seq__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 8px;
  text-align: center;
}

.seq__ic {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--seq-r) * 2);
  height: calc(var(--seq-r) * 2);
  margin-bottom: 20px;
  border: 2px solid rgba(var(--brand-rgb), 0.35);
  border-radius: 50%;
  background: var(--surface);
  color: var(--brand-2);
}

.seq__ic svg {
  width: 34px;
  height: 34px;
}

.seq__n {
  position: absolute;
  top: -4px;
  right: -4px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg);
  color: var(--label);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
}

.seq__t {
  max-width: 22ch;
  margin: 0;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.5;
}

/* Column-count variants. The arrows are measured off the circle radius and
   the grid gap, not the column count, so nothing else changes. */
.seq--3 {
  --seq-cols: 3;
}

.seq--5 {
  --seq-cols: 5;
}

/* Number-only circles: the step number is the circle's content, no icon and
   no corner badge. */
.seq--numbered .seq__ic {
  color: var(--brand-2);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
}

/* The resolution: filled circle, dark ink, heavier title. */
.seq__step--final .seq__ic {
  border-color: transparent;
  background: var(--brand);
  color: var(--btn-ink);
}

.seq__step--final .seq__n {
  border-color: transparent;
  background: var(--btn-ink);
  color: #fff;
}

.seq__step--final .seq__t {
  color: var(--ink);
  font-weight: 600;
}

/* The arrow to the next step: ::after is the shaft, from 10px past this
   circle's edge to 10px short of the next one's; ::before is the head, a
   rotated square whose tip lands on the shaft's end. Both are measured off
   the circle centre and the grid gap, so they follow any column width. */
.seq__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--seq-r) - 1px);
  left: calc(50% + var(--seq-r) + 10px);
  width: calc(100% + var(--seq-gap) - var(--seq-r) * 2 - 20px);
  border-top: 2px solid rgba(var(--brand-rgb), 0.55);
}

.seq__step:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(var(--seq-r) - 5px);
  left: calc(150% + var(--seq-gap) - var(--seq-r) - 21px);
  width: 9px;
  height: 9px;
  border-top: 2px solid rgba(var(--brand-rgb), 0.9);
  border-right: 2px solid rgba(var(--brand-rgb), 0.9);
  transform: rotate(45deg);
}

@media (max-width: 900px) {
  .seq {
    grid-template-columns: 1fr;
    gap: 44px; /* room for the vertical arrow */
  }

  .seq__step:not(:last-child)::after {
    top: calc(100% + 8px);
    left: calc(50% - 1px);
    width: 0;
    height: 28px;
    border-top: 0;
    border-left: 2px solid rgba(var(--brand-rgb), 0.55);
  }

  .seq__step:not(:last-child)::before {
    top: calc(100% + 25px);
    left: calc(50% - 4.5px);
    transform: rotate(135deg); /* head pointing down */
  }
}

/* --------------------- Disclosure: a section folded behind a button -------
   <details> with the ghost button as its <summary>. TidyMonk folds the
   pipeline diagram under the scenario this way: the answer sits next to the
   question, the page stays lean until asked, and it costs no JS — keyboard
   and screen-reader semantics come with the element. A hash link opens it
   (Chrome does that natively; a three-line script in the page covers the
   rest). Opening is a native snap; only the content fades in. */
.reveal {
  margin-top: 40px;
  text-align: center;
}

.reveal__btn {
  list-style: none; /* the disclosure triangle */
}

.reveal__btn::-webkit-details-marker {
  display: none;
}

/* The chevron does the marker's job, and turns when open. */
.reveal__btn::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-left: 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s;
}

.reveal[open] .reveal__btn::after {
  transform: translateY(2px) rotate(225deg);
}

.reveal__body {
  margin-top: 40px;
  text-align: left;
}

.reveal[open] .reveal__body {
  animation: reveal-in 0.35s ease both;
}

@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------- Pipeline diagram (lanes x columns) ---------------
   Recovered from the pre-redesign TidyMonk site, where it lived in a light
   modal behind a button. Here it is an ordinary section: visible, indexable,
   no JS. The diagram says three things and every one of them is kept:

   - the LANE a step sits in, and its colour, says who does it — green is a
     person, amber runs on its own, brand-blue is the backend API;
   - the NUMBER says the order; the COLUMN says which steps line up, so the
     empty cells are load-bearing (and one of them is the gap the 6 → 7 arrow
     passes through);
   - the ARROWS say direction — → between consecutive steps inside a lane,
     ↓ / ↑ in the connector rows between lanes, each in its own column.

   Colour rides on --pa / --pa-rgb, set per lane; anything outside a lane
   inherits the brand from .pipe. */
.pipe {
  --pa: var(--brand-2);
  --pa-rgb: var(--brand-rgb);
  display: flex;
  flex-direction: column;
}

.pipe__lane {
  padding: 18px 19px 20px;
  border: 1px solid rgba(var(--pa-rgb), 0.3);
  border-radius: 18px;
  background: linear-gradient(0deg, rgba(var(--pa-rgb), 0.07), rgba(var(--pa-rgb), 0.07)), var(--surface-2);
}

/* Semantic, not brand: the same green and amber the original used, lifted
   one stop for a dark ground. Measured on --surface: 8.3:1 and 9.5:1. */
.pipe__lane--manual {
  --pa: #34d399;
  --pa-rgb: 52, 211, 153;
}

.pipe__lane--automated {
  --pa: #fbbf24;
  --pa-rgb: 251, 191, 36;
}

.pipe__badge {
  display: inline-block;
  margin-bottom: 16px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--pa);
  color: var(--btn-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* The row gap is the runway for the → arrow; the connector rows and the
   output row reuse the same grid, padded to the lane's inner edge so all
   four columns line up from top to bottom. */
.pipe__row,
.pipe__flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.pipe__flow,
.pipe__out {
  padding: 0 19px;
}

.pipe__flow {
  padding-top: 6px;
  padding-bottom: 6px;
}

.pipe__flow-cell {
  min-height: 22px;
  text-align: center;
  color: var(--brand-2);
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1.2;
}

.pipe__box {
  position: relative;
  padding: 18px 14px 14px;
  border: 1px solid rgba(var(--pa-rgb), 0.45);
  border-radius: 14px;
  background: var(--surface);
}

/* Step number as a pill on the corner, as the original drew it. */
.pipe__n {
  position: absolute;
  top: -10px;
  left: -10px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--pa);
  color: var(--btn-ink);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.pipe__ic {
  display: block;
  width: 22px;
  height: 22px;
  margin-bottom: 10px;
  color: var(--pa);
}

.pipe__t {
  margin-bottom: 6px;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pipe__d {
  color: var(--ink-5);
  font-size: 12.5px;
  line-height: 1.5;
}

/* → to the next step in the same lane, centred in the 28px gap. */
.pipe__box--next::after {
  content: "→";
  position: absolute;
  top: 50%;
  left: calc(100% + 14px);
  transform: translate(-50%, -50%);
  color: var(--brand-2);
  font-family: var(--font-mono);
  font-size: 18px;
  line-height: 1;
  pointer-events: none;
}

/* The final output, outside the lanes, brand-tinted like the original. */
.pipe__box--out {
  background: linear-gradient(0deg, rgba(var(--pa-rgb), 0.14), rgba(var(--pa-rgb), 0.14)), var(--surface);
}

/* Holds a column open so the lanes stay aligned; nothing to show. */
.pipe__gap {
  visibility: hidden;
}

@media (max-width: 900px) {
  .pipe__row {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  /* Alignment across lanes is what the gaps, connectors and arrows are for,
     and two columns cannot preserve it — so drop all three and let the lane
     colours and the numbers carry the reading. */
  .pipe__gap,
  .pipe__flow,
  .pipe__box--next::after {
    display: none;
  }

  .pipe__lane + .pipe__lane,
  .pipe__out {
    margin-top: 14px;
  }
}

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

/* --------------------- Replaces list (cross / tick) --------------------- */
.repl {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 24px;
  background: var(--surface);
}

/* The cross carries the meaning of the row, so it is not decoration and the
   faintest ink is too faint for it. At --ink-6 it measured 2.9:1 on
   ScrapeMonk, under the 3:1 floor for a non-text mark, and 3.6 on PriceMonk.
   --ink-5 clears 4.4 on the worst of the four and still reads as the muted,
   negative side against the brand tick below. */
.repl__x {
  color: var(--ink-5);
  font-size: 20px;
  line-height: 1;
  flex: none;
}

.repl__t {
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink-2);
}

.repl--yes {
  align-items: center;
  margin-top: 22px;
  border-color: var(--brand-2);
  background: rgba(var(--brand-rgb), 0.12);
}

.repl--yes .repl__x {
  color: var(--brand-2);
}

.repl--yes .repl__t {
  font-size: 16.5px;
  color: var(--ink);
  font-weight: 600;
}

/* Before/after columns, used by the sub-product pages. The product sites put
   their .repl rows in one flat list, each in its own bordered box; here the
   content is four paired contrasts, "today" against "with the product", so
   the pairing is the shape of the copy and the two columns have to stay.

   The rows therefore lose the box and keep the glyph: the same .repl__x and
   .repl__t the flat list uses, stacked inside a card. The cross-versus-tick
   and the brighter ink on the affirmative side are what the pre-redesign
   pages carried and what the first port of these two sites flattened into an
   identical neutral dot on both sides. */
.cmp {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmp li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* Smaller than the flat list's cross: there it is 20px alone in a bordered
   card, here it is one of four in a stack. The colour comes from .repl__x. */
.cmp .repl__x {
  font-size: 17px;
  padding-top: 1px;
}

.cmp .repl__t {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-4);
}

/* The affirmative column: brand glyph, brighter ink, no bolding — the weight
   change belongs to the single summary row, not to four list items. */
.cmp--yes .repl__x {
  color: var(--brand-2);
}

.cmp--yes .repl__t {
  color: var(--ink-2);
}

/* --------------------------- Centred band --------------------------- */
.band {
  padding: 56px var(--gutter) 96px;
}

.band__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.band__h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 auto 20px;
  max-width: 20ch;
}

.band__p {
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 70ch;
  margin: 0 auto;
  text-wrap: pretty;
}

/* ------------------------------ Pricing ------------------------------ */
.price-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  padding: 36px;
  display: flex;
  flex-direction: column;
}

.price-card__top {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.price-card__unit {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--brand-2), var(--brand-3));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.price-card__unit-note {
  font-size: 16px;
  color: var(--ink-3);
}

.price-card__incl {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-5);
  margin: 20px 0 26px;
}

.price-card__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-6);
  margin-bottom: 16px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 30px;
}

.chip {
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13.5px;
  color: var(--ink-2);
}

.price-card .btn {
  margin-top: auto;
}

/* --------------------------- Experience pills --------------------------- */
.pills {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pill-row {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  background: var(--surface);
  font-size: 16px;
  color: var(--ink-2);
}

.pill-row__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-2);
  box-shadow: 0 0 10px var(--brand-2);
  flex: none;
}

.exp__lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 20px;
  text-wrap: pretty;
}

.exp__lede strong {
  color: #fff;
  font-weight: 600;
}

/* ---------------------------- MonkSuite strip ---------------------------- */
.suite__head {
  text-align: center;
  margin-bottom: 48px;
}

.suite__flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.node {
  flex: 1;
  min-width: 200px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 26px;
  background: var(--surface);
  text-align: center;
  transition: border-color 0.2s;
}

.node--self {
  border-color: var(--brand-2);
  background: rgba(var(--brand-rgb), 0.12);
}

.node__badge {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(var(--brand-rgb), 0.1);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
}

.node__badge img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.node__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 8px;
}

.node__desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-4);
  margin: 0;
}

.node--self .node__desc {
  color: var(--ink-self);
}

.node--scrapemonk:hover {
  border-color: var(--accent-scrapemonk);
}

.node--tidymonk:hover {
  border-color: var(--accent-tidymonk);
}

.node--matchmonk:hover {
  border-color: var(--accent-matchmonk);
}

.node--pricemonk:hover {
  border-color: var(--accent-pricemonk);
}

.suite__arrow {
  display: flex;
  align-items: center;
  color: var(--ink-6);
  font-family: var(--font-mono);
  font-size: 20px;
}

.suite__note {
  text-align: center;
  font-size: 15px;
  color: var(--ink-4);
  margin: 32px 0 0;
}

.services {
  margin-top: 40px;
  border: 1px dashed var(--border-strong);
  border-radius: 16px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.services__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-6);
  margin-bottom: 10px;
}

.services__list {
  font-size: 16px;
  color: var(--ink-2);
}

.services__quote {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 32ch;
}

/* -------------------------------- CTA -------------------------------- */
.cta {
  padding: 16px var(--gutter) 96px;
}

.cta__box {
  position: relative;
  overflow: hidden;
  max-width: var(--wrap);
  margin: 0 auto;
  border-radius: 28px;
  background: linear-gradient(120deg, var(--cta-from), var(--cta-to));
  padding: 84px 48px;
  text-align: center;
}

.cta__box::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--dot-on-cta) 1.4px, transparent 1.4px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, #000, transparent 72%);
  mask-image: radial-gradient(ellipse 80% 100% at 50% 0%, #000, transparent 72%);
}

.cta__inner {
  position: relative;
}

.cta__h2 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4vw, 46px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.08;
  margin: 0 auto 16px;
  max-width: 18ch;
  color: #fff;
  text-wrap: balance;
}

.cta__p {
  font-size: 18px;
  color: var(--brand-3);
  margin: 0 auto 32px;
  max-width: 44ch;
}

/* ------------------------------ Contact ------------------------------ */
.contact {
  padding: 40px var(--gutter) 100px;
}

.contact__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 24px;
  align-items: stretch;
}

.contact__card {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  padding: 40px;
  display: flex;
  flex-direction: column;
}

.contact__person {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}

.contact__photo {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-strong);
  flex: none;
}

.contact__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
}

.contact__role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-5);
  margin-top: 4px;
}

.contact__hint {
  font-size: 14px;
  color: var(--ink-4);
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.form {
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-2);
  padding: 40px;
}

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}

.field {
  display: block;
  margin-bottom: 18px;
}

.form__row .field {
  margin-bottom: 0;
}

.field--last {
  margin-bottom: 24px;
}

.field__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-5);
  margin-bottom: 9px;
}

.field input,
.field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 13px 15px;
  color: var(--ink);
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s;
}

.field textarea {
  resize: vertical;
}

.field input:focus-visible,
.field textarea:focus-visible {
  border-color: var(--brand-2);
  outline: 2px solid var(--brand-3);
  outline-offset: 1px;
}

.form__consent {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-4);
  margin-top: 16px;
}

.form__status {
  margin-top: 18px;
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.5;
}

.form__status--ok {
  border: 1px solid var(--brand-2);
  background: rgba(var(--brand-rgb), 0.14);
  color: var(--ink);
}

.form__status--err {
  border: 1px solid #b4545f;
  background: rgba(180, 84, 95, 0.14);
  color: #ffd9dd;
}

.hidden {
  display: none !important;
}

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------- Footer ------------------------------- */
.footer {
  border-top: 1px solid var(--border);
  background: var(--bg-footer);
  padding: 64px var(--gutter) 40px;
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

.footer__tag {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--brand-3);
  margin: 0 0 16px;
}

.footer__h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-6);
  margin-bottom: 18px;
  font-weight: 700;
}

.footer__link {
  display: block;
  color: var(--ink-4);
  font-size: 14px;
  padding: 6px 0;
  transition: color 0.2s;
}

.footer__link:hover {
  color: var(--ink);
}

.footer__legal {
  padding-top: 28px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-6);
  letter-spacing: 0.04em;
  line-height: 1.7;
}

.footer__legal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.footer__entity {
  color: var(--ink-5);
}

/* ============================================================================
   PRICING TIERS (3-up)
   Added for PriceMonk; TidyMonk and MatchMonk publish tiered prices too, so
   this belongs in the shared base rather than in one site.
   ============================================================================ */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}

.tier {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  padding: 32px;
  display: flex;
  flex-direction: column;
}

.tier--featured {
  border-color: var(--brand-2);
  background: rgba(var(--brand-rgb), 0.1);
}

/* ScrapeMonk sells four self-serve plans rather than PriceMonk's three, so the
   grid takes a four-up variant. The responsive rules further down still win on
   order, collapsing this to two columns and then one; the tighter padding buys
   back room for the feature text at 267px per card. */
.tiers--four {
  grid-template-columns: repeat(4, 1fr);
}

.tiers--four .tier {
  padding: 28px 26px;
}

/* ScrapeMonk's plans quote a price and PriceMonk's do not, so the amount and
   its unit are their own elements rather than part of .tier__name. */
.tier__price {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.tier__price-unit {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--ink-5);
  margin: 6px 0 16px;
}

/* The four plans above are self-serve B2C and check out through Stripe; B2B
   buys through a conversation instead, so its card spans the whole row and
   swaps the feature list for a single CTA. */
.tier--contact {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  border-color: var(--brand-2);
}

.tier--contact .tier__for {
  margin-bottom: 0;
  max-width: 66ch;
}

.tier--contact .btn {
  flex: none;
}

.tier__badge {
  position: absolute;
  top: -11px;
  left: 28px;
  background: var(--brand);
  color: var(--btn-ink);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

.tier__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}

.tier__for {
  font-size: 14px;
  color: var(--ink-4);
  margin-bottom: 26px;
}

.tier__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.tier__feature {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

.tier__tick {
  color: var(--brand-2);
  flex: none;
  line-height: 1.4;
}

/* Roadmap rows. Marked visibly so the table cannot be read as selling
   something the security page dates to the future — one honest "planned" label
   is what buys the other rows their credibility. */
.tier__feature--planned {
  color: var(--ink-5);
  font-style: italic;
}

.tier__feature--planned .tier__tick {
  color: var(--ink-6);
  font-style: normal;
}

.tier .btn {
  margin-top: auto;
}

.tiers__note {
  margin-top: 22px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 22px 26px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-3);
}

.tiers__note strong {
  color: var(--ink-2);
  font-weight: 600;
}

/* ============================================================================
   IMPLEMENTATION FLOW
   ============================================================================ */
.flow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.flow__step {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 26px;
}

.flow__n {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brand-2);
  margin-bottom: 14px;
}

.flow__t {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
}

.flow__d {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-4);
  margin: 0;
}

/* ============================================================================
   DOCUMENT PAGES  (/about, /security, /terms, /privacy)
   A measured single column. The previous subpages pulled Tailwind from a CDN or
   leaned on the old homepage stylesheet, so they drifted from the product page
   they were meant to support.
   ============================================================================ */
.doc {
  padding: 64px var(--gutter) 96px;
}

.doc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 32px 0;
}

.doc__inner {
  max-width: 46rem;
  margin: 0 auto;
}

/* The .doc__* text modifiers are all scoped to .doc on purpose: `.doc p, .doc li`
   further down is (0,0,1,1) and comes later in the file, so a bare single-class
   selector lost on both specificity and order and its font-size never applied.
   These labels then rendered at body size — and because their letter-spacing is
   in em, the tracking inflated with it, which is much of why the legal pages
   read as oversized. Keep the .doc prefix on any modifier added here. */
.doc .doc__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 18px;
}

.doc h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.2vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 20px;
  text-wrap: balance;
}

/* .doc-scoped for the specificity reason noted above. */
.doc .doc__lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-3);
  margin: 0 0 40px;
  text-wrap: pretty;
}

.doc h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 48px 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.doc h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  margin: 32px 0 10px;
}

.doc p,
.doc li {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--ink-3);
  text-wrap: pretty;
}

.doc p {
  margin: 0 0 18px;
}

.doc ul,
.doc ol {
  margin: 0 0 20px;
  padding-left: 22px;
}

.doc li {
  margin-bottom: 10px;
}

.doc strong {
  color: var(--ink-2);
  font-weight: 600;
}

.doc a:not(.btn) {
  color: var(--brand-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.doc a:not(.btn):hover {
  color: var(--brand-3);
}

.doc .doc__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--ink-6);
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid var(--border-subtle);
}

/* Callout for honesty statements and roadmap notes */
.callout {
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--brand-2);
  border-radius: 12px;
  background: var(--surface);
  padding: 22px 26px;
  margin: 0 0 24px;
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout__title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label);
  margin-bottom: 12px;
}

/* Definition-style rows, for shipped-vs-roadmap tables */
.deflist {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin: 0 0 24px;
}

.deflist__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: baseline;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface);
}

.deflist__row:last-child {
  border-bottom: 0;
}

.deflist__k {
  font-size: 15.5px;
  color: var(--ink-2);
}

.deflist__v {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.deflist__v--yes {
  color: var(--brand-2);
}

.deflist__v--planned {
  color: var(--ink-5);
}

.deflist__v--no {
  color: var(--ink-6);
}

/* ---- Responsive for the components above ---- */
@media (max-width: 1024px) {
  .tiers,
  .flow {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 820px) {
  .tiers,
  .flow {
    grid-template-columns: 1fr;
  }

  /* The B2B card's side-by-side layout has no room left once the grid is a
     single column. */
  .tier--contact {
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }

  .tier {
    padding: 26px 22px;
  }

  .doc h2 {
    margin-top: 36px;
  }

  .deflist__row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ============================================================================
   RESPONSIVE
   The source .dc.html was authored at desktop width and carries no media
   queries at all — every grid is a fixed `1fr 1fr` or `repeat(3,1fr)`, so on a
   phone it would render three 100px columns. Three breakpoints, deliberately:
   the previous stylesheet had nine overlapping ones and was unmaintainable.
   ============================================================================ */

/* ---- Tablet ---- */
@media (max-width: 1024px) {
  :root {
    --gutter: 28px;
  }

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

  .steps {
    grid-template-columns: 1fr;
  }

  .panel,
  .panel--tight {
    padding: 52px 36px;
  }

  .split,
  .panel__split,
  .panel__split--narrow,
  .split--wide-left {
    gap: 36px;
  }

  .suite__arrow {
    transform: rotate(90deg);
    justify-content: center;
    width: 100%;
    flex: none;
  }

  .node {
    min-width: 100%;
  }
}

/* ---- Mobile ---- */
@media (max-width: 820px) {
  .section,
  .contact {
    padding-bottom: 64px;
  }

  .hero {
    padding: 72px var(--gutter) 64px;
  }

  .hero__cta .btn {
    flex: 1 1 100%;
  }

  /* Hamburger + dropdown panel, the monksuite.io pattern. shared/nav.js
     toggles .open on the header. */
  .nav__toggle {
    display: inline-flex;
  }

  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 6px 0 12px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
  }

  .nav.open .nav__links {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  .nav__links .nav__link {
    padding: 14px var(--gutter);
    font-size: 15px;
  }

  .nav__links .btn--nav {
    margin: 8px var(--gutter) 0;
  }

  .split,
  .split--even,
  .split--wide-left,
  .panel__split,
  .panel__split--narrow,
  .contact__grid,
  .highlights,
  .cards,
  .cards--2,
  .badges,
  .form__row,
  .footer__grid {
    grid-template-columns: 1fr;
  }

  .sec-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 32px;
  }

  .eyebrow--hint {
    text-align: left;
  }

  .panel,
  .panel--tight {
    padding: 40px 24px;
    border-radius: 20px;
  }

  .contact__card,
  .form,
  .price-card {
    padding: 28px 24px;
  }

  .cta__box {
    padding: 56px 26px;
    border-radius: 22px;
  }

  .services {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }

  .services__quote {
    max-width: none;
  }

  .footer {
    padding: 48px var(--gutter) 32px;
  }

  .footer__grid {
    gap: 32px;
    margin-bottom: 32px;
  }
}

/* ---- Small phone ---- */
@media (max-width: 560px) {
  :root {
    --gutter: 20px;
  }

  .hero__title {
    max-width: none;
  }

  .pill {
    font-size: 10.5px;
    letter-spacing: 0.16em;
    white-space: normal;
    text-align: center;
  }

  .card,
  .step {
    padding: 22px;
  }

  .price-card__unit {
    font-size: 36px;
  }

  .video__frame {
    border-radius: 16px;
  }
}

/* ============================================================================
   MOTION
   Honour the OS setting — the previous stylesheet had no
   prefers-reduced-motion block anywhere.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn--primary:hover,
  .btn--light:hover {
    transform: none;
  }
}

/* Windows high-contrast / forced colours: keep borders perceivable. */
@media (forced-colors: active) {
  .card,
  .step,
  .node,
  .repl,
  .price-card,
  .contact__card,
  .form {
    border-color: CanvasText;
  }
}

@media print {
  body {
    background: #fff;
    color: #000;
  }

  .nav,
  .video,
  .cta,
  .hero__grid,
  .hero__glow {
    display: none;
  }
}

/* ============================================================================
   CASE STUDIES — the monksuite.io hub pattern, single-brand.
   Markup is rendered by shared/cases.js from the site's /cases.js data.
   ============================================================================ */
.cases__grid {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* Featured case */
.feat {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  border: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.3s;
  cursor: pointer;
}

.feat:hover,
.feat:focus-visible {
  border-color: var(--brand);
}

.feat__media {
  position: relative;
  min-height: 230px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: radial-gradient(120% 120% at 82% 12%, rgba(var(--brand-rgb), 0.28), transparent 60%), var(--surface-2);
}

.feat__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(circle at 75% 25%, #000, transparent 70%);
  mask-image: radial-gradient(circle at 75% 25%, #000, transparent 70%);
}

.feat__pic {
  position: relative;
}

.feat__pic img {
  width: 110px;
  height: 110px;
  object-fit: contain;
}

.feat__body {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.feat__ind {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-5);
}

.feat__title {
  font-size: 27px;
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0;
}

.feat__teaser {
  color: var(--ink-4);
  font-size: 15px;
  line-height: 1.6;
  max-width: 62ch;
  margin: 0;
}

.feat__metric {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 4px;
}

.feat__metric .v {
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--brand);
}

.feat__metric .k {
  font-size: 13px;
  color: var(--ink-4);
}

.feat__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.feat__open {
  font-weight: 600;
  font-size: 14px;
  color: var(--brand);
}

.feat__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-5);
}

@media (min-width: 760px) {
  .feat {
    flex-direction: row;
  }

  .feat__media {
    width: 320px;
    flex: 0 0 320px;
    min-height: 300px;
  }

  .feat__body {
    padding: 34px;
  }

  .feat__title {
    font-size: 30px;
  }
}

/* Paged card row */
.casepage {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.casepage__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-5);
  padding: 0 2px;
}

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

@media (min-width: 720px) {
  .casegrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.casecard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: transform 0.25s, border-color 0.25s;
}

.casecard:hover,
.casecard:focus-visible {
  transform: translateY(-4px);
  border-color: var(--brand);
}

.casecard__ic {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  padding: 9px;
  margin-bottom: 4px;
  background: rgba(var(--brand-rgb), 0.12);
  border: 1px solid rgba(var(--brand-rgb), 0.3);
}

.casecard__ic img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.casecard__tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
}

.casecard__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.28;
  letter-spacing: -0.01em;
  flex: 1;
  margin: 0;
}

.casecard__co {
  font-size: 11.5px;
  color: var(--ink-5);
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

.pager__btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color 0.2s, opacity 0.2s;
}

.pager__btn:hover:not(:disabled) {
  border-color: var(--ink);
}

.pager__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.pager__dots {
  display: flex;
  gap: 8px;
}

.pager__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.pager__dot.active {
  background: var(--ink);
  transform: scale(1.3);
}

/* Lightbox */
.lb {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(5, 6, 9, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lb.open {
  display: flex;
}

.lb__shell {
  width: min(980px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
}

.lb__bar,
.lb__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
}

.lb__bar {
  border-bottom: 1px solid var(--border);
}

.lb__foot {
  border-top: 1px solid var(--border);
}

.lb__bar-l {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}

.lb__title {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
}

.lb__close,
.lb__btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink);
  border-radius: 10px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: border-color 0.2s, opacity 0.2s;
}

.lb__close:hover,
.lb__btn:hover:not(:disabled) {
  border-color: var(--ink);
}

.lb__btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.lb__stage {
  overflow: hidden;
  flex: 1;
}

.lb__track {
  display: flex;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.lb__dots {
  display: flex;
  gap: 8px;
}

.lb__dots button {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.lb__dots button.active {
  background: var(--brand);
  transform: scale(1.3);
}

.lb__nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lb__pg {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-5);
}

/* Slides */
.slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  padding: 40px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.slide__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1.4px, transparent 1.4px),
    radial-gradient(120% 90% at 85% 10%, rgba(var(--brand-rgb), 0.16), transparent 60%);
  background-size: 22px 22px, cover;
  -webkit-mask-image: radial-gradient(circle at 82% 8%, #000, rgba(0, 0, 0, 0.55) 55%, transparent 90%);
  mask-image: radial-gradient(circle at 82% 8%, #000, rgba(0, 0, 0, 0.55) 55%, transparent 90%);
}

.slide > *:not(.slide__bg) {
  position: relative;
}

.slide__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}

.slide__kicker .n {
  color: var(--ink-5);
}

.slide h2 {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
}

.slide .lead {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-4);
  max-width: 62ch;
  margin: 0;
}

.slide .body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-4);
  margin: 0;
}

.slide .dim {
  color: var(--ink-6);
}

.slide__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.slide__list .it {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.slide__list .dot {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--brand);
}

.slide__list .dot--neg {
  color: var(--accent-matchmonk);
}

.slide__list .dot svg {
  width: 100%;
  height: 100%;
}

.slide__list p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-4);
  margin: 0;
}

.slide__list p b {
  color: var(--ink);
}

.slide__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
}

@media (min-width: 720px) {
  .slide__cols {
    grid-template-columns: 1fr 1.1fr;
  }
}

.slide__labels {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.slide__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 6px;
}

@media (min-width: 640px) {
  .slide__stats {
    grid-template-columns: repeat(3, 1fr);
  }
}

.statbox {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  background: var(--surface);
}

.statbox .v {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--brand);
}

.statbox .k {
  font-size: 13.5px;
  font-weight: 600;
  margin-top: 6px;
}

.statbox .d {
  font-size: 12px;
  color: var(--ink-5);
  margin-top: 4px;
}

.slide--cover {
  align-items: flex-start;
  justify-content: center;
}

.cover-glyph {
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: rgba(var(--brand-rgb), 0.12);
  border: 1px solid rgba(var(--brand-rgb), 0.3);
}

.cover-glyph img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.slide--cover h2 {
  font-size: clamp(26px, 4vw, 40px);
}

.slide__client {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-4);
}

.slide__client .sep {
  color: var(--ink-6);
}

.slide__client b {
  color: var(--ink);
}

.slide--quote {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.slide--quote .mark {
  font-size: 64px;
  line-height: 0.5;
  color: var(--brand);
  font-family: Georgia, serif;
}

.slide--quote blockquote {
  font-size: clamp(22px, 3.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  max-width: 22ch;
  margin: 0;
}

.slide--quote .cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

.cs-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--ink-4);
}

/* Mock UI on the "in action" slide */
.mock {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface);
  font-size: 12.5px;
}

.mock__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.mock__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}

.mock__bar .t {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-5);
  margin-left: 8px;
}

.mock__body {
  padding: 6px 0;
}

.mock__row {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 0.8fr 0.8fr;
  gap: 10px;
  align-items: center;
  padding: 9px 14px;
}

.mock__row.head {
  color: var(--ink-5);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

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

.mock__row span {
  color: var(--ink-4);
}

.mock__unit {
  color: var(--ink-6);
}

.mbar {
  display: block;
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.mbar i {
  display: block;
  height: 100%;
  background: var(--brand);
  border-radius: 4px;
}

.chip-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.chip-mini.ok {
  background: rgba(var(--brand-rgb), 0.16);
  color: var(--brand);
}

.chip-mini.warn,
.chip-mini.bad {
  background: rgba(252, 113, 134, 0.16);
  color: var(--accent-matchmonk);
}

@media (max-width: 560px) {
  .slide {
    padding: 24px;
  }

  .feat__body {
    padding: 22px;
  }

  .lb {
    padding: 12px;
  }
}