/* ---------------------------------------------------------------
   Tokens
   --------------------------------------------------------------- */
:root {
  --violet: #8a3fff;
  --magenta: #fa34e8;
  /* The deeper magenta carries the taglines and the filled surfaces — the
     featured plan card and the feature-table ticks. */
  --magenta-deep: #dd00ff;
  --grad: linear-gradient(160deg, var(--magenta), var(--violet));
  --grad-deep: linear-gradient(144deg, var(--magenta-deep), #8d3dff);

  /*
    The brand runs a near-black per role rather than one flat text colour:
    body copy is warmest, the 32px section headings darkest, and only the
    feature table is a true #000. These are the values the live site computes.
  */
  --ink: #2e2e27;          /* 16px body copy */
  --ink-soft: #2e2e27;     /* secondary 16px copy — same ink as body */
  --ink-lead: #232321;     /* 19.2px lead paragraphs */
  --ink-heading: #1e1e1e;  /* 32px section headings */
  --ink-title: #333333;    /* 24px card + feature titles */
  --ink-display: #070707;  /* the home hero heading */
  --ink-nav: #1a1b1f;      /* header nav links */
  --ink-label: #344054;    /* form labels */
  --ink-card: #484a54;     /* use-case card title + copy */
  --ink-meta: #373940;     /* use-case card dates */

  /* Form feedback — the only greens/reds in the palette */
  --ok: #067647;
  --err: #d92d20;

  --line: #f1f2f9;         /* card + panel hairlines */
  --line-strong: #dbdbdb;  /* feature-table row rules */
  --line-input: #cccccc;   /* form field borders */
  --tint: #faf5ff;
  --tint-pink: rgba(221, 0, 255, 0.1);
  --band: #f5f5f5;
  --surface: #f5f6fa;
  --paper: #ffffff;

  /* Soft ambient shadows — cards should look lit, not dropped */
  --lift: 0 2px 20px 8px rgba(0, 0, 0, 0.05);
  --lift-sm: 0 2px 12px rgba(0, 0, 0, 0.06);

  /*
    Satoshi is what renders; the names after it are only the fallback chain,
    used if Satoshi fails to load or during the swap. Matched to the brand
    site's stack exactly, Impact included.
  */
  --font-body: Satoshi, Impact, sans-serif;
  --font-display: Switzer, Impact, sans-serif;

  --radius: 18px;
  --radius-pill: 999px;
  --wrap: 1240px;

  /* 16 / 19.2 / 32 / 48 — the scale the brand site uses */
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: clamp(1.5rem, 3vw, 2rem);
  --step-3: clamp(2.25rem, 5vw, 3rem);
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  /* 24px on the 16px body, 28.8px on the 19.2px leads — the brand's 1.5 */
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
  /*
    Left on the platform default deliberately. Forcing `antialiased` drops
    subpixel rendering for grayscale, which thins every stroke — same weight,
    visibly lighter text than the brand site, which doesn't set it.
  */
}

h1, h2, h3 {
  line-height: 1.25;
  margin: 0 0 0.5em;
  font-weight: 700;
}
/*
  h2/h3 are inked here but h1 deliberately is not: the page heroes sit on the
  gradient and their h1 has to keep inheriting the section's white.
*/
h2, h3 { color: var(--ink-title); }
/* Switzer is reserved for the page-level display heading */
h1 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.3333;
}
/*
  Headings are inked by class rather than by tag so the ones sitting on the
  gradient surfaces go on inheriting their white from the section.
*/
.cta-band__heading { color: inherit; }

p { margin: 0 0 1em; }
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
  border-radius: 4px;
}

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

.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
.wrap--narrow { width: min(100% - 2.5rem, 560px); }
/*
  The brand holds a 100px gutter either side before it starts centring, so
  content sits well clear of the window edge on laptop widths. Below the
  layout breakpoint that reverts to the tighter 20px gutter above.
*/
@media (min-width: 880px) {
  .wrap { width: min(100% - 200px, var(--wrap)); }
  .wrap--narrow { width: min(100% - 200px, 560px); }
}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
.btn {
  /*
    Satoshi reserves more descender than ascender space, so a symmetrically
    padded pill renders its glyphs ~2px below centre. Trading padding between
    top and bottom optically centres the label without changing the height.
    Variants override --btn-pad-y rather than the padding shorthand, so the
    correction survives.
  */
  --btn-pad-y: 0.7em;
  --btn-optical: 1.5px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--btn-pad-y) - var(--btn-optical)) 1.6em
           calc(var(--btn-pad-y) + var(--btn-optical));
  border: 0;
  border-radius: var(--radius-pill);
  font-size: var(--step-1);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/*
  Filled buttons invert to an outline on hover. The ring is an inset shadow
  rather than a border so the button doesn't resize and nudge its neighbours.
*/
.btn--primary {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 6px 18px -6px rgba(138, 63, 255, 0.6);
}
.btn--primary:hover {
  background-image: none;
  background-color: var(--paper);
  color: var(--violet);
  box-shadow: inset 0 0 0 2px var(--violet);
}

/* White-on-gradient buttons invert the other way, to a white outline */
.btn--invert { background: #fff; color: var(--ink); }
.btn--invert:hover {
  background-color: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 2px #fff;
}
.btn--lg {
  --btn-pad-y: 0.75em;
  padding-inline: 1.75em;
}

/* Trimmed to the size the pill reads at on the brand site: 198 x 53 */
.site-header .btn--primary,
.cta-panel .btn--primary {
  --btn-pad-y: 12px;
  padding-inline: 28px;
}

/* ---------------------------------------------------------------
   Header
   --------------------------------------------------------------- */
/* Solid white — a translucent bar would pick up the violet hero behind it */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper);
}
.site-header__inner {
  display: flex;
  align-items: center;
  /*
    Sized against the brand header, where the pill sits ~34px off the last
    link's text. The nav link carries 10px of its own padding, so the flex gap
    covers the rest.
  */
  gap: 1.48rem;
  min-height: 98px;
}

.site-header__logo { display: inline-block; }
.site-header__logo img { width: 189px; }

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  gap: 1.625rem;
  list-style: none;
  margin: 0; padding: 0;
}
/* Padding widens the hit area and gives the 46px text-to-text spacing the brand uses */
.nav__link {
  display: inline-block;
  padding: 5px 10px;
  text-decoration: none;
  font-size: var(--step-1);
  font-weight: 500;
  /* Set solid rather than on the body's 1.5, and tracked out a quarter pixel */
  line-height: 20px;
  letter-spacing: 0.25px;
  color: var(--ink-nav);
}
/* Nav links fill with the brand gradient on hover */
.nav__link:hover {
  background-image: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* The current page is marked by filling its label with the gradient, not by
   swapping the ink — the brand tilts this one 100deg rather than 160deg */
.nav__link.is-current {
  background-image: linear-gradient(100deg, var(--magenta), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 500;
}

/* ---------------------------------------------------------------
   Sections
   --------------------------------------------------------------- */
/* Clipped horizontally so a card sliding in from the side can't widen the page */
.section { padding: 5.5rem 0; overflow-x: clip; }
.section--tint { background: var(--tint); }
.section--muted { background: #fafafa; }
.section--lilac { background: #f9f5ff; }
/* The brand tints this band with 20% of the deep magenta rather than a flat hex */
.section--pink { background: rgba(221, 0, 255, 0.2); }
.section--top { padding-top: 3.5rem; }

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Taglines take the deeper magenta, not the gradient's lighter end */
  color: var(--magenta-deep);
  margin-bottom: 0.75rem;
}
.eyebrow--center { text-align: center; }
/* Sentence-case eyebrow, for when it sits directly above a centred heading */
.eyebrow--plain {
  font-size: var(--step-1);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* The 32px headings run on a notably open 60px leading */
.section__heading,
.cta-band__heading,
.cta-panel__heading { line-height: 1.875; }
.section__heading,
.cta-panel__heading { color: var(--ink-heading); }

.section__heading { font-size: var(--step-2); max-width: 22ch; }
.section__heading--center {
  max-width: 38ch;
  margin-inline: auto;
  text-align: center;
}
.section__body { color: var(--ink-lead); max-width: 60ch; font-size: var(--step-1); }
.section__body--center { margin-inline: auto; text-align: center; }
.page__heading { font-size: var(--step-3); }

/* Tints part of a heading with the brand magenta — the deeper one, as in the
   taglines, rather than the gradient's lighter end */
.accent { color: var(--magenta-deep); }

/* Hero */
.hero {
  padding: 5.5rem 0 5rem;
  background: var(--grad);
  color: #fff;
  text-align: center;
}
.hero__heading {
  font-size: var(--step-3);
  max-width: 18ch;
  margin-inline: auto;
}
.hero__body {
  /* The brand's measure, in px rather than ch so the copy breaks across the
     same words it does on the live site */
  max-width: 604px;
  margin: 0 auto 2rem;
  font-size: var(--step-1);
}

/*
  Inner-page hero — flat brand violet, no CTA, so the copy gets a wider measure.
  The band runs 64px of padding with a 32px trailing margin under the copy, so
  it sits deeper below the paragraph than above the heading.
*/
.hero--flat {
  background: var(--violet);
  padding-block: 4rem;
}
.hero--flat .hero__heading {
  /*
    Set in px, not ch: this measure is what decides where the heading breaks,
    and the brand's copy turns after "you're" at 617px. Anything up to 754px
    keeps that break, so 700 leaves room on both sides of the threshold.
  */
  max-width: 700px;
  margin-bottom: 2rem;
}
.hero--flat .hero__body { margin-bottom: 2rem; }

/* Hero that carries the contact form rather than a CTA button */
.hero--form { padding-bottom: 4rem; }
.hero--form .hero__heading { margin-bottom: 2.5rem; }

/* ---------------------------------------------------------------
   Home — split hero + client strip
   --------------------------------------------------------------- */
/* Tighter than a standard section — the header sits directly above it */
.hero-split { padding: 3rem 0; }
.hero-split__inner {
  display: grid;
  /* Illustration is fixed at its brand size; the copy takes the rest. The gap
     is what sets the copy column's width, and so where the heading breaks —
     the brand runs a tight 16px here, not a section-sized gutter. */
  grid-template-columns: 1fr 416px;
  gap: 1rem;
  align-items: center;
}
.hero-split__inner > * { min-width: 0; }
/* The home hero is the one heading set larger than the inner-page heroes */
.hero-split__heading {
  font-size: clamp(2.25rem, 5vw, 3.2rem);
  line-height: 1.34375;
  color: var(--ink-display);
}
.hero-split__body {
  color: var(--ink-lead);
  font-size: var(--step-1);
  max-width: 46ch;
  margin: 0;
}
.hero-split__media img { margin-left: auto; width: 416px; max-width: 100%; }

.clients { margin-top: 4rem; text-align: center; }
.clients__label {
  color: #475467;
  line-height: 20px;
  font-size: var(--step-1);
  margin-bottom: 2rem;
}

/*
  Logos scroll continuously inside a fixed 800px window centred on the page,
  with the edges faded so they enter and leave softly.
*/
.clients__viewport {
  width: min(800px, 100% - 2.5rem);
  margin-inline: auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.clients__track {
  display: flex;
  width: max-content;
  animation: clients-scroll 22s linear infinite;
}
.clients__track:hover { animation-play-state: paused; }

/*
  The trailing padding matches the inner gap, so each group occupies an
  identical slice and a -50% shift lands seamlessly on the next copy.
*/
.clients__group {
  display: flex;
  align-items: center;
  gap: 4rem;
  padding: 0 4rem 0 0;
  margin: 0;
  list-style: none;
}
.clients__group img { width: 112px; }

@keyframes clients-scroll {
  to { transform: translateX(-50%); }
}

/* ---------------------------------------------------------------
   Home — use cases, staggered across three ruled columns
   --------------------------------------------------------------- */
.uc-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 4rem;
}
.uc-col {
  display: grid;
  gap: 4rem;
  align-content: start;
  padding: 0 2rem;
  border-left: 2px dashed var(--violet);
}
/*
  The middle column drops to break the grid's rhythm. This is padding, not
  margin, so the dashed rule still spans the full row height and lines up
  with its neighbours.
*/
.uc-col:nth-child(2) { padding-top: 7rem; }

.uc-item__icon { width: 71px; height: 64px; }
.uc-item__title { font-size: 1.5rem; margin: 2.5rem 0 0.75rem; }
.uc-item__body { color: var(--ink-soft); margin: 0; }

/* ---------------------------------------------------------------
   Home — how it works
   --------------------------------------------------------------- */
.hiw {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem 1.5rem;
  list-style: none;
  margin: 4rem 0 0;
  padding: 0;
}
.hiw__media {
  display: grid;
  place-items: center;
  min-height: 380px;
  padding: 2.5rem;
  background: #f4f4f7;
  border-radius: 16px;
}
.hiw__media img { max-width: min(280px, 100%); }
/* The step titles carry more leading than the other 24px titles */
.hiw__title { font-size: 1.5rem; line-height: 1.8333; margin: 1.75rem 0 0.5rem; }
.hiw__body { color: var(--ink-soft); margin: 0; }

/* ---------------------------------------------------------------
   Home — oversight + key benefits + compliance roles
   --------------------------------------------------------------- */
.oversight,
.benefits,
.roles {
  display: grid;
  gap: 1.5rem;
  list-style: none;
  margin: 4rem 0 0;
  padding: 0;
}
.oversight { grid-template-columns: repeat(3, 1fr); }
.benefits { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.roles { grid-template-columns: repeat(3, 1fr); }

/* Oversight and benefits share one card: tinted, rounded, centred content */
.oversight__item,
.benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--surface);
  border-radius: 24px;
}

.oversight__item { gap: 1.5rem; padding: 2rem 1.5rem; }
.oversight__title { font-size: 1.5rem; margin: 0 0 0.5rem; }
.oversight__body { color: var(--ink-soft); margin: 0; }

.benefit { padding: 2.4rem; }
.benefit__title { font-size: 1.5rem; margin: 0 0 0.5rem; }
.benefit__body { color: var(--ink-soft); margin: 0 0 2rem; }
.benefit__media { width: 230px; max-width: 100%; margin-top: auto; }

/* Icon sits beside the copy rather than above it, as on the brand site */
.role {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: var(--paper);
  border-radius: 24px;
  padding: 2rem;
}
.role__icon {
  width: 80px;
  height: 80px;
  /* The icon keeps its size; the copy column takes what's left */
  flex: none;
}
.role__text { min-width: 0; }
.role__title { font-size: 1.5rem; margin: 0 0 1rem; }

/* ---------------------------------------------------------------
   Cards
   --------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
}
.cards--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.cards--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
}
.card--compact { padding: 1.5rem; }
.card__title { font-size: 1.0625rem; }
.card__body { color: var(--ink-soft); margin: 0; font-size: var(--step-0); }

/* Plain discs, hung 20px off the copy — the brand doesn't dot these itself.
   Stated explicitly: this list nests inside .roles, and a second-level list
   would otherwise default to hollow circles. */
.ticks {
  margin: 0;
  padding-left: 20px;
  list-style-type: disc;
  font-size: var(--step-0);
  color: var(--ink-soft);
}
.ticks li { margin-bottom: 4px; }
.ticks li:last-child { margin-bottom: 0; }

/* Steps */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 2.5rem 0 0;
  padding: 0;
  counter-reset: step;
}
.step {
  border-top: 2px solid var(--line);
  padding-top: 1.25rem;
}
.step__num {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--magenta);
  margin-bottom: 0.5rem;
}
.step__title { font-size: 1.0625rem; }
.step__body { color: var(--ink-soft); font-size: var(--step-0); margin: 0; }

/* ---------------------------------------------------------------
   Feature rows — a floating text panel alongside an illustration,
   alternating sides down the page
   --------------------------------------------------------------- */
.feature-rows {
  display: grid;
  gap: 5rem;
  margin-top: 4rem;
}
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
/* Flipped rows put the illustration first without reordering the markup */
.feature-row--flip .feature-row__panel { grid-column: 2; grid-row: 1; }
.feature-row--flip .feature-row__media { grid-column: 1; grid-row: 1; }

.feature-row__media img { margin-inline: auto; }

.panel {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--lift);
  padding: 2rem;
  text-align: center;
}
.panel__title { font-size: 1.5rem; margin-bottom: 0.75rem; }
.panel__body { color: var(--ink-soft); font-size: var(--step-0); margin: 0; }

/* ---------------------------------------------------------------
   FAQ
   --------------------------------------------------------------- */
.faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  /* Aside tops out against the first question rather than centring */
  align-items: start;
  margin-top: 3.5rem;
}
.faq__aside-title { font-size: 1.5rem; }
.faq__aside-body {
  color: var(--ink-soft);
  font-size: var(--step-0);
  margin-bottom: 1.75rem;
}
.faq__aside-body a { color: var(--magenta-deep); text-decoration: none; }
.faq__aside-body a:hover { text-decoration: underline; }

.faq__list {
  display: grid;
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.faq__item {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--lift-sm);
  padding: 1.5rem;
}
.faq__q {
  position: relative;
  display: block;
  padding-left: 2.25rem;
  font-size: var(--step-1);
  font-weight: 700;
  line-height: 1.4167;
  color: var(--ink-title);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }

/*
  The icon is two bars rather than a "+"/"−" glyph swap, because `content`
  can't be transitioned. The upright bar rotates flat to become the minus.
*/
.faq__q::before,
.faq__q::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 15px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.25s ease;
}
.faq__q::after { transform: rotate(90deg); }
.faq__item[open] .faq__q::after { transform: rotate(0deg); }

.faq__a {
  color: var(--ink-soft);
  font-size: var(--step-0);
  margin: 0.75rem 0 0;
  padding-left: 2.25rem;
}

/* ---------------------------------------------------------------
   Pricing
   --------------------------------------------------------------- */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  list-style: none;
  margin: 0 0 4rem;
  padding: 0;
}
.plan {
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--lift-sm);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  min-height: 290px;
}
.plan--featured {
  background: var(--grad-deep);
  border-color: transparent;
  color: #fff;
  box-shadow: none;
}
/* The brand stands the plan name a full 48px clear of the price */
.plan__name { font-size: 1rem; line-height: 1.25; margin-bottom: 3rem; }
.plan:not(.plan--featured) .plan__name { color: var(--ink-title); }
.plan__price {
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.3;
  margin-bottom: 0;
}
/* The brand sets the Enterprise "Custom" larger and tighter than the Pro price */
.plan:not(.plan--featured) .plan__price {
  font-size: 3.5rem;
  line-height: 0.943;
  color: var(--ink-title);
}
/* The note rides close under the price rather than on the 48px rhythm */
.plan__note {
  font-size: var(--step-0);
  line-height: 1.25;
  margin-top: 0.625rem;
  color: var(--ink-title);
}
/* The plan CTAs are set a step smaller than the header/hero buttons, on a
   taller pill: 48px against the header button's 53px */
.plan__cta {
  --btn-pad-y: 14px;
  margin-top: auto;
  text-align: center;
  font-size: var(--step-0);
  line-height: 1.25;
}
/* These beat .btn--primary/.btn--invert on specificity, so they hover explicitly */
.plan--featured .plan__cta { background: #fff; color: #000; }
.plan--featured .plan__cta:hover {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 2px #fff;
}

.plan:not(.plan--featured) .plan__cta { background: var(--grad); color: #fff; }
.plan:not(.plan--featured) .plan__cta:hover {
  background: var(--paper);
  color: var(--violet);
  box-shadow: inset 0 0 0 2px var(--violet);
}

.features__heading {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--magenta);
  margin-bottom: 1.25rem;
}
.features__scroll { overflow-x: auto; }
.features {
  width: 100%;
  /* fixed so the four columns stay even; min-width hands narrow screens over
     to the .features__scroll wrapper rather than crushing the labels */
  table-layout: fixed;
  min-width: 640px;
  /* separate (at zero spacing) so each row owns its full rule instead of
     sharing it with its neighbour — collapsing splits the 1px between the two
     boxes and lands the rows on fractional heights */
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--step-0);
  text-align: left;
}
/* The brand table runs tight: 8px padding on a 20px line, so the header band
   sits at 36px and a ruled feature row at 37px. */
.features th,
.features td {
  padding: 0.5rem;
  line-height: 1.25;
  border-bottom: 1px solid var(--line-strong);
  background: var(--paper);
  color: #000;
  font-weight: 400;
}
/* A group's last row carries no rule — the gap below it does the separating. */
.features tbody tr:last-child th,
.features tbody tr:last-child td { border-bottom: 0; }
/*
  Heights are stated rather than left to padding + rule, exactly as the brand
  table does. A hairline can round to a fraction of a pixel at some zoom
  levels, which would otherwise drift the rows off 36/37. Table cells treat
  height as a minimum, so a label that wraps still grows its row.
*/
.features thead th { height: 36px; }
.features tbody tr:not(.features__group) th,
.features tbody tr:not(.features__group) td { height: 37px; }
/* A tick is taller than a line of text; trim its cell so those rows keep the
   same 36px rhythm as the text ones. */
.features td:has(.tick) {
  padding-top: 0.3rem;
  padding-bottom: 0.4rem;
}
/* The band's own edge separates it from the first row — no rule under it */
.features thead th {
  background: var(--band);
  border-bottom: 0;
}
/* Four equal columns, as on the brand table. */
.features__label-col,
.features__label { width: 25%; }
.features__group th {
  background: var(--band);
  border-top: 1rem solid var(--paper);
  border-bottom: 0;
}

.tick {
  /* block, not inline-block: an inline box would reserve descender space under
     the circle and push tick rows taller than the text rows */
  display: block;
  width: 24px; height: 24px;
  border-radius: 50%;
  position: relative;
}
.tick::after {
  content: "";
  position: absolute;
  left: 8.5px; top: 5px;
  width: 6px; height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.tick--on { background: var(--grad-deep); }
.tick--off { background: #d9dbe9; }

/* ---------------------------------------------------------------
   Forms + prose
   --------------------------------------------------------------- */
.form { margin-top: 2rem; }
.form--flush { margin-top: 0; }
/* Form controls don't inherit type by default — without this the submit
   button drops out of Satoshi and renders in the UA's default face */
.form__submit {
  font-family: inherit;
  font-size: var(--step-0);
  line-height: 1.25;
}
.field { display: block; margin-bottom: 1.25rem; }
.field__req { color: #ff0000; }

/* Honeypot: parked off-screen rather than display:none — bots skip hidden inputs */
.field--hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Submit errors under the button; empty until contact-form.js fills it.
   Success shows on the button itself — errors persist, praise can vanish. */
.form__status {
  display: none;
  margin: 1rem 0 0;
  font-size: var(--step-0);
}
.form__status--err { display: block; color: var(--err); }

/* After a successful send the submit button turns green and reads
   "Message sent ✓" for a few seconds, then contact-form.js reverts it */
.form__submit--sent,
.form__submit--sent:disabled {
  background: var(--ok);
  box-shadow: 0 6px 18px -6px rgba(6, 118, 71, 0.5);
  cursor: default;
}

/* Paired fields sit side by side; the fields keep their own vertical rhythm */
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1.25rem;
}
.form__submit { width: 100%; }
.field__label {
  display: block;
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink-label);
  margin-bottom: 0.4rem;
}
.field__input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line-input);
  border-radius: 10px;
  font: inherit;
  background: var(--paper);
}

/* Contact — illustration beside a floating form card */
.contact {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 3rem;
  align-items: center;
}
/* Grid children must be allowed to shrink below their content width */
.contact > * { min-width: 0; }
.contact__media img { margin-inline: auto; max-width: min(440px, 100%); }
.contact__card {
  background: var(--paper);
  border-radius: 16px;
  box-shadow: var(--lift-sm);
  padding: 2rem;
  /* The card also sits inside the centred demo hero, so anchor the form left */
  text-align: left;
  color: var(--ink);
}
/* The tagline over the contact form is set a step smaller and solid */
.contact__card .eyebrow {
  font-size: var(--step-0);
  line-height: 1;
}
/* Lighter than the other 24px headings, and inked like a section heading */
.contact__heading {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.033;
  color: var(--ink-heading);
  text-align: center;
  margin-bottom: 1.75rem;
}

/* ---------------------------------------------------------------
   Post listing + assurances
   --------------------------------------------------------------- */
.posts {
  display: grid;
  gap: 2.5rem;
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 760px;
}
.post {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
  align-items: start;
}
.post__media { border-radius: 8px; }
/* The use-case cards run on their own greyer inks, a shade off the body text */
.post__title {
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.3077;
  color: var(--ink-card);
}
.post__excerpt {
  color: var(--ink-card);
  font-size: var(--step-0);
  line-height: 1.25;
}
.post__date {
  color: var(--ink-meta);
  font-size: 0.9rem;
  line-height: 1.3889;
  margin: 0;
}

.assurances {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  align-items: end;
  list-style: none;
  margin: 0;
  padding: 3rem;
  background: var(--tint);
  border-radius: 16px;
}
.assurance { text-align: center; }
.assurance img { margin-inline: auto; max-width: min(240px, 100%); }
.assurance__label {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.prose { padding: 3.5rem 0; max-width: 68ch; }
.prose h1 { font-size: var(--step-3); }

/* Effective / last-updated dates, separated by a hairline rule */
.prose__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.75rem;
  color: var(--ink-soft);
  margin-bottom: 2rem;
}
.prose__meta span + span { position: relative; }
.prose__meta span + span::before {
  content: "|";
  position: absolute;
  left: -0.95rem;
  opacity: 0.35;
}
.prose h2 { font-size: var(--step-2); margin-top: 2rem; }
.prose p { color: var(--ink-soft); }

/* ---------------------------------------------------------------
   CTA band + footer
   --------------------------------------------------------------- */
.cta-band {
  background: var(--grad);
  color: #fff;
  text-align: center;
  padding: 4.5rem 0;
}
.cta-band__heading { font-size: var(--step-2); }
.cta-band__body { opacity: 0.9; margin-bottom: 1.75rem; }

/* Softer, inset variant of the CTA band */
.cta-panel {
  background: var(--tint-pink);
  border-radius: 26px;
  text-align: center;
  padding: 4rem 2rem;
}
.cta-panel__heading { font-size: var(--step-2); }
.cta-panel__body {
  color: var(--ink-lead);
  font-size: var(--step-1);
  max-width: 48ch;
  margin: 0 auto 1.75rem;
}

.site-footer {
  background: #030303;
  color: #f0e8e8;
  padding: 4rem 0 1.5rem;
}
.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 11rem 11rem;
  gap: 2.5rem;
}

.site-footer__logo { display: inline-block; }
.site-footer__logo img { width: 160px; }

.site-footer__blurb {
  max-width: 46ch;
  margin-top: 1.75rem;
  font-size: 1.2rem;
  line-height: 1.6667;
  color: #fff;
}
.site-footer__social {
  display: inline-block;
  margin-top: 1.5rem;
}
.site-footer__heading {
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.7143;
  color: #fff;
  margin-bottom: 1.5rem;
}
.site-footer__list {
  display: grid;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__list a { text-decoration: none; }
.site-footer__list a:hover { color: #fff; text-decoration: underline; }
/* The copyright line is the one place the brand reaches for Satoshi Light */
.site-footer__base {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--step-0);
  font-weight: 300;
  line-height: 1.25;
}
.site-footer__base p { margin: 0; }

/* ---------------------------------------------------------------
   Responsive + motion
   --------------------------------------------------------------- */
/* Two illustrated columns stop working well before the header does */
@media (max-width: 880px) {
  .feature-rows { gap: 3rem; }
  .feature-row { grid-template-columns: 1fr; gap: 1.75rem; }
  .feature-row--flip .feature-row__panel,
  .feature-row--flip .feature-row__media { grid-column: 1; grid-row: auto; }

  .faq { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact { grid-template-columns: 1fr; gap: 2.5rem; }
  .post { grid-template-columns: 200px 1fr; gap: 1.5rem; }

  .hero-split__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-split__media img { width: auto; }
  .hero-split__heading, .hero-split__body { max-width: none; }
  .hero-split__media img { margin-inline: auto; }

  .uc-cols { grid-template-columns: 1fr; gap: 3rem; }
  .uc-col:nth-child(2) { padding-top: 0; }
  .oversight, .roles { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* Full-size logo + CTA won't share a row on a phone, so scale both down
     and keep the header to two rows instead of three */
  .site-header__inner { flex-wrap: wrap; gap: 1rem; min-height: 0; padding: 1rem 0; }
  .site-header__logo img { width: 150px; }
  .site-header .btn {
    font-size: var(--step-0);
    --btn-pad-y: 0.6em;
    padding-inline: 1.2em;
  }
  .cta-panel { padding: 3rem 1.5rem; }
  .form__row { grid-template-columns: 1fr; }
  .post { grid-template-columns: 1fr; }
  .assurances { grid-template-columns: 1fr; padding: 2rem; }
  .hiw { grid-template-columns: 1fr; }
  .benefits { grid-template-columns: 1fr; }
  .clients__group { gap: 1.75rem; padding-right: 1.75rem; }
  .nav { margin-left: 0; order: 3; width: 100%; }
  .nav__list { gap: 1.25rem; }
  .site-footer__inner { grid-template-columns: 1fr; }
  .section { padding: 3.5rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------
   Scroll reveals
   --------------------------------------------------------------- */
/*
  Blocks arrive from 100px off-axis over 1s. outQuart — the brand's easing —
  is cubic-bezier(.165, .84, .44, 1): most of the distance is covered in the
  first third, so it reads as settling into place rather than sliding.

  Everything hangs off .is-js, which the page sets on itself before paint. If
  the script never runs the content simply renders, rather than staying blank.
*/
.is-js [data-reveal] {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1),
              transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.is-js [data-reveal="from-top"] { transform: translateY(-100px); }
.is-js [data-reveal="from-bottom"] { transform: translateY(100px); }
.is-js [data-reveal="from-left"] { transform: translateX(-100px); }
.is-js [data-reveal="from-right"] { transform: translateX(100px); }

.is-js [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .is-js [data-reveal] { opacity: 1; transform: none; }
}