/* ============================================================================
   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: 10px 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;
}

/* --------------------- Shot: a still from the product's own video -------
   A real screen, framed like the demo video, where a page needs a visual and
   no illustration exists yet (Anna, TidyMonk, 2026-10-07). */
.shot {
  max-width: 1000px;
  margin: 0 auto;
}
.shot__frame {
  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);
}
.shot__frame img {
  display: block;
  width: 100%;
  height: auto;
}
.shot__cap {
  max-width: 720px;
  margin: 18px auto 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-4);
  text-wrap: balance;
}
.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__title {
  max-width: 1000px;
  margin: 0 auto 28px;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}

/* ------------------------- 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;
}

/* --------------------- Pay-off: value, on the light panel ---------------
   TidyMonk's "Why TidyMonk Pays Off" (Anna, 2026-10-06: too dark, too much
   text). Lives inside .panel, so it reads the panel tokens. Three value cards
   of one-claim tick lines, then a before/after grid: the head row names the
   columns once on wide screens, and below 900px each cell shows its own
   label instead (they are only visually hidden above that, so screen readers
   always get them). The last row is the punchline, inverted. */
.payoff__value {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 36px;
}
.payoff__card {
  background: var(--panel-card);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 24px 24px 22px;
}
.payoff__h {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--panel-ink);
  margin: 0 0 14px;
}
.payoff__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.payoff__list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--panel-ink-2);
}
.payoff__list li::before,
.payoff__tm::before {
  content: "\2713" / "";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--panel-accent);
}
.payoff__sub {
  margin: 56px 0 16px;
}
.payoff__cmp {
  display: grid;
  gap: 10px;
}
.payoff__row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 28px;
  align-items: start;
  background: var(--panel-card);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 18px 22px;
}
.payoff__row p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
}
.payoff__case {
  font-weight: 600;
  color: var(--panel-ink);
}
.payoff__by,
.payoff__tm {
  position: relative;
  padding-left: 24px;
}
.payoff__by {
  color: var(--panel-ink-2);
}
.payoff__by::before {
  content: "\2715" / "";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--panel-ink-2);
  opacity: 0.55;
}
.payoff__tm {
  color: var(--panel-ink);
  font-weight: 600;
}
.payoff__row--head {
  background: none;
  border: 0;
  padding: 0 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--panel-ink-2);
}
.payoff__lbl {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.payoff__row--punch {
  background: var(--panel-ink);
  border-color: var(--panel-ink);
}
.payoff__row--punch .payoff__case,
.payoff__row--punch .payoff__tm,
.payoff__row--punch .payoff__tm::before {
  color: var(--panel);
}
.payoff__row--punch .payoff__by,
.payoff__row--punch .payoff__by::before {
  color: var(--panel);
  opacity: 0.8;
}
@media (max-width: 900px) {
  .payoff__value,
  .payoff__row {
    grid-template-columns: 1fr;
  }
  .payoff__row {
    gap: 10px;
  }
  .payoff__row--head {
    display: none;
  }
  .payoff__lbl {
    position: static;
    display: block;
    width: auto;
    height: auto;
    clip: auto;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 2px;
  }
}

/* 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 */
/* Two equal callouts: same width, same weight (Anna, 2026-10-07; it was a
   wide semibold punchline beside a narrower note). */
.highlights {
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 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: 500;
  text-wrap: pretty;
}

/* 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
   how-it-works 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;
  }
}

/* --------------------- Two runs: the first, and every one after ---------
   Anna's "First Run, Every Run After" (WUX-7), folded under the scenario. It
   makes one claim — four of the five steps need you the first time, none of
   them after that — and every visual channel carries a part of it:

   - the COLUMNS: both rows share one five-column grid, so each chip in the
     bottom row sits under the card that describes it;
   - the PILL on each card says who does the step; only profiling is filled;
   - the BRACKET under combine + fix, and the two boxes it feeds, say what is
     kept: the routine records lookups and fixes, the job adds the sources and
     joins, a schedule and a destination. A join or union creates a new
     dataset, so it is a job node and never part of a routine;
   - the STEM from the job drops onto the bottom row: the job runs it.

   The routine and the job are one column wide, shifted half a column right,
   so each is centred on a gap — the routine under the bracket, the job one
   column on — with the same arrow between them as between the cards. Arrows
   are drawn the way .seq draws them: ::after the shaft, ::before the head. */
.runs {
  --runs-gap: 32px;
  --runs-stem: 22px; /* bracket → routine */
  --runs-drop: 30px; /* job → the rule above the bottom row */
  padding: 32px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-2);
}

.runs__key {
  margin: 0 0 18px;
  color: var(--label);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.runs__key span {
  margin-left: 4px;
  color: var(--ink-5);
  font-family: var(--font-body);
  font-size: 13.5px;
  letter-spacing: 0;
  text-transform: none;
}

.runs__key--after {
  margin-top: var(--runs-drop);
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.runs__steps,
.runs__save,
.runs__chips {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--runs-gap);
  margin: 0;
  padding: 0;
}

.runs__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 36px 14px 28px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  text-align: center;
}

.runs__card--auto {
  border-color: var(--brand-2);
  background: linear-gradient(0deg, rgba(var(--brand-rgb), 0.12), rgba(var(--brand-rgb), 0.12)), var(--surface);
}

.runs__n {
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  color: var(--ink-5);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}

.runs__ic {
  width: 24px;
  height: 24px;
  margin-bottom: 14px;
  color: var(--brand-2);
}

.runs__knob {
  fill: var(--surface);
}

.runs__t {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

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

/* Who does the step, straddling the card's bottom edge. */
.runs__who {
  position: absolute;
  bottom: 0;
  left: 50%;
  padding: 3px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-5);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, 50%);
}

.runs__card--auto .runs__who {
  border-color: transparent;
  background: var(--brand);
  color: var(--btn-ink);
}

/* → from each card to the next, and from the routine into the job. */
.runs__card:not(:last-child)::after,
.runs__job::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  width: calc(var(--runs-gap) - 12px);
  border-top: 2px solid rgba(var(--brand-rgb), 0.55);
}

.runs__card:not(:last-child)::after {
  left: calc(100% + 6px);
}

.runs__job::after {
  right: calc(100% + 6px);
}

.runs__card:not(:last-child)::before,
.runs__job::before {
  content: "";
  position: absolute;
  top: calc(50% - 5px);
  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);
}

.runs__card:not(:last-child)::before {
  left: calc(100% + var(--runs-gap) - 17px);
}

.runs__job::before {
  left: -17px;
}

/* Room below the cards for the pills, the bracket and its stem. */
.runs__save {
  margin-top: 56px;
}

.runs__routine,
.runs__job {
  position: relative;
  padding: 14px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
  text-align: center;
  transform: translateX(calc(50% + var(--runs-gap) / 2));
}

.runs__routine {
  grid-column: 3;
}

.runs__job {
  grid-column: 4;
  border-color: var(--brand-2);
  background: linear-gradient(0deg, rgba(var(--brand-rgb), 0.12), rgba(var(--brand-rgb), 0.12)), var(--surface);
}

.runs__node {
  margin: 0 0 4px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}

/* Exactly columns 3–4 (the routine is centred on the gap between them),
   ticks up towards the cards, stem down onto the routine. */
.runs__bracket {
  position: absolute;
  bottom: calc(100% + var(--runs-stem));
  left: calc(-50% - var(--runs-gap) / 2);
  right: calc(-50% - var(--runs-gap) / 2);
  height: 12px;
  border: 1.5px solid var(--border-strong);
  border-top: 0;
  border-radius: 0 0 6px 6px;
}

.runs__bracket::after {
  content: "";
  position: absolute;
  top: 100%;
  left: calc(50% - 0.75px);
  height: var(--runs-stem);
  border-left: 1.5px solid var(--border-strong);
}

.runs__stem {
  position: absolute;
  top: 100%;
  left: calc(50% - 1px);
  height: calc(var(--runs-drop) + 1px);
  border-left: 2px solid var(--brand-2);
}

.runs__chip {
  position: relative;
  padding: 14px 8px;
  border-radius: 12px;
  background: var(--brand);
  color: var(--btn-ink);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

/* › between chips, centred in the gap. */
.runs__chip:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  left: calc(100% + var(--runs-gap) / 2 - 6px);
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--ink-5);
  border-right: 2px solid var(--ink-5);
  transform: rotate(45deg);
}

@media (max-width: 1100px) {
  .runs {
    --runs-gap: 26px;
    padding: 24px;
  }

  .runs__card {
    padding: 34px 10px 26px;
  }
}

/* Stacked, as .seq stacks: the cards run downwards with ↓ between them. A
   bracket cannot gather two cards that no longer sit side by side, so it
   goes, and the routine's own line says what it keeps. The chips stay one
   row — five of them fit, and the row is the point. */
@media (max-width: 900px) {
  .runs {
    --runs-gap: 6px;
    padding: 22px 16px;
  }

  .runs__steps,
  .runs__save {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .runs__card:not(:last-child)::after,
  .runs__job::after {
    top: auto;
    right: auto;
    left: calc(50% - 1px);
    width: 0;
    height: 22px;
    border-top: 0;
    border-left: 2px solid rgba(var(--brand-rgb), 0.55);
  }

  .runs__card:not(:last-child)::after {
    top: calc(100% + 16px);
  }

  .runs__job::after {
    bottom: calc(100% + 12px);
  }

  .runs__card:not(:last-child)::before,
  .runs__job::before {
    left: calc(50% - 4.5px);
    transform: rotate(135deg); /* head pointing down */
  }

  .runs__card:not(:last-child)::before {
    top: calc(100% + 27px);
  }

  .runs__job::before {
    top: -23px;
  }

  .runs__bracket {
    display: none;
  }

  .runs__save {
    margin-top: 44px;
  }

  .runs__routine,
  .runs__job {
    grid-column: 1;
    transform: none;
  }

  .runs__chip {
    padding: 11px 2px;
    font-size: 10px;
    letter-spacing: 0.02em;
  }

  .runs__chip:not(:last-child)::after {
    display: none;
  }
}

/* --------------------- 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;
}

/* Plan comparison table (PriceMonk). One row per feature so the plans line
   up across; on narrow screens the wrapper scrolls sideways and the feature
   column stays pinned. */
.plans {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
}

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

.plans__table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.45;
}

.plans__table th,
.plans__table td {
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: center;
  vertical-align: middle;
  color: var(--ink-2);
}

.plans__table th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
  width: 34%;
  text-align: left;
  font-weight: 500;
  background: var(--surface);
}

/* Anna, 2026-10-09: "víc zapojit tu výraznou modrou". The brand colour
   carries the header band, the ticks, the templates row and the price row;
   everything else stays on the dark surface so those read as the accents. */
.plans__table thead th {
  padding-top: 24px;
  padding-bottom: 20px;
  border-bottom: 0;
  vertical-align: bottom;
  background: var(--brand);
}

/* The row carries the colour too, so fractional cell widths leave no seams. */
.plans__table thead tr {
  background: var(--brand);
}

.plans__table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

.plans__name {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--btn-ink);
}

.plans__for {
  display: block;
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--btn-ink);
}

/* The tick as a filled brand dot: the strongest repeat of the colour. */
.plans__yes [aria-hidden] {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--btn-ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

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

/* The templates block: a labelled group with its members indented under it. */
.plans__group th,
.plans__group td {
  padding-top: 14px;
  padding-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-2);
  border-top: 1px solid rgba(var(--brand-rgb), 0.35);
  border-bottom-color: rgba(var(--brand-rgb), 0.35);
  background: rgba(var(--brand-rgb), 0.12);
}

/* The pinned column needs an opaque fill, so the tint is layered on --surface. */
.plans__table .plans__group th[scope="row"] {
  background: linear-gradient(rgba(var(--brand-rgb), 0.12), rgba(var(--brand-rgb), 0.12)), var(--surface);
}

.plans__table .plans__group th[scope="row"] {
  font-weight: 400;
  color: var(--brand-2);
}

.plans__sub th[scope="row"] {
  padding-left: 36px;
  color: var(--ink-3);
  font-size: 14.5px;
}

.plans__break th,
.plans__break td {
  border-top: 1px solid var(--border);
}

.plans__ref {
  margin-left: 2px;
  font-size: 0.7em;
  color: var(--brand-2);
}

.plans__planned {
  font-style: italic;
  color: var(--ink-5);
}

.plans__table tfoot th,
.plans__table tfoot td {
  padding-top: 22px;
  padding-bottom: 24px;
  border-bottom: 0;
  border-top: 1px solid rgba(var(--brand-rgb), 0.35);
}

.plans__price {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--brand-2);
}

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

.plans__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

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

.plans__foot sup {
  color: var(--brand-2);
  margin-right: 2px;
}

@media (max-width: 560px) {
  .plans__table th,
  .plans__table td {
    padding: 10px 12px;
    font-size: 14px;
  }

  .plans__sub th[scope="row"] {
    padding-left: 22px;
  }
}

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

/* ============================================================================
   USE-CASE DECKS — the monksuite.io decks section, single-brand.
   Up to three downloadable PDF cards, then a request band whose checkboxes
   list this site's other relevant decks; shared/decks.js posts it to the
   same n8n webhook the contact form uses. Which decks a site carries is in
   the comment above its section. The cover image is the deck's own dark
   header band, so the card itself stays quiet; the tool chips take each
   sibling's --accent-*, with the Commodity and Evidence tints set here
   because no theme defines them (monksuite.io's --scrape-2 / --price-2).
   ============================================================================ */
.decks {
  --deck-commodity: #e2c2ff;
  --deck-evidence: #d4fafe;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

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


.deck {
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: transform 0.3s, border-color 0.3s;
}

.deck:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong);
}

/* aria-hidden + tabindex -1: the Download link below reaches the same PDF. */
.deck__cover {
  display: block;
  position: relative;
  background: var(--surface-2);
}

.deck__cover img {
  width: 100%;
  height: auto;
}

/* The 285px crop cuts through the deck's lede (deck-covers.sh); this hides it. */
.deck__cover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46px;
  background: linear-gradient(transparent, var(--surface));
}

.deck__body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  flex: 1;
}

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

.deck__title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.01em;
}

/* The deck's own headline under the short name; pulled up to read as one unit. */
.deck__sub {
  margin-top: -7px;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--ink-2);
  text-wrap: pretty;
}

.deck__lede {
  color: var(--ink-4);
  font-size: 14px;
  line-height: 1.6;
  flex: 1;
  text-wrap: pretty;
}

.deck__chain {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.deck__tool {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--t);
  background: color-mix(in srgb, var(--t) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--t) 30%, transparent);
}

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

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

.deck__dl {
  display: inline-flex;
  align-items: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--btn-ink);
  background: var(--brand);
  padding: 10px 18px;
  border-radius: 999px;
  transition: transform 0.2s;
}

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

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

.deck__meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-5);
  letter-spacing: 0.04em;
}

/* Request band: body on top, the picker under it, the address row last. */
.deckreq {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 18px;
  padding: 28px 32px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 130% at 4% 0%, rgba(var(--brand-rgb), 0.16), transparent 62%),
    radial-gradient(120% 130% at 98% 100%, rgba(var(--brand-rgb), 0.1), transparent 64%),
    var(--surface-2);
}

.deckreq__body {
  max-width: 62ch;
}

.deckreq h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

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

/* The address field's label: for screen readers only, the placeholder shows. */
.deckreq__lbl {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.deckreq__pick {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
}

.deckreq__pick legend {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--label);
  padding: 0;
  margin-bottom: 12px;
}

.deckreq__opts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 26px;
}

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

.deckreq__opt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
  cursor: pointer;
}

.deckreq__opt input {
  appearance: none;
  -webkit-appearance: none;
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  cursor: pointer;
  border: 1.5px solid rgba(var(--brand-rgb), 0.5);
  background: rgba(var(--brand-rgb), 0.08);
  display: grid;
  place-content: center;
  transition: background 0.18s, border-color 0.18s;
}

.deckreq__opt:hover input {
  border-color: rgba(var(--brand-rgb), 0.85);
}

.deckreq__opt input:checked {
  background: var(--brand);
  border-color: var(--brand);
}

.deckreq__opt input:checked::after {
  content: "";
  width: 9px;
  height: 5px;
  margin-top: -2px;
  border-left: 2px solid var(--btn-ink);
  border-bottom: 2px solid var(--btn-ink);
  transform: rotate(-45deg);
}

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

@media (pointer: coarse) {
  .deckreq__opt {
    min-height: 44px;
  }
}

.deckreq__opt input:focus-visible {
  outline: 2px solid var(--brand-3);
  outline-offset: 2px;
}

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

.deckreq__input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 13px 16px;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
}

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

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

.deckreq__form .btn {
  flex: 0 0 auto;
}

.deckreq__form .btn[disabled] {
  opacity: 0.6;
  cursor: default;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.deckreq__pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.deckreq .deckreq__note {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--ink-5);
  line-height: 1.5;
}

.deckreq__note a,
.deckreq__status a {
  text-decoration: underline;
}

.deckreq .deckreq__status {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.deckreq .deckreq__status--ok {
  color: var(--brand-2);
}

.deckreq .deckreq__status--err {
  color: #ff9aa6;
}

.deckreq [hidden] {
  display: none;
}