/* recruited.com.au — the public website.
 *
 * Separate from assets/app.css on purpose. The application is a tool people
 * live in all day: dense, one step smaller, built for scanning. A marketing
 * page is read once, on a phone, by someone deciding whether to trust us — so
 * the type is larger, the space is generous, and the colour arrives as accent
 * rather than as panel.
 *
 * The palette is the approved brand system in docs/palette.md, not the default
 * palette in the website brief: white leads, pink and peach carry the accent
 * weight, orange sits behind them, navy is the restraint. Two decisions follow
 * from measuring it rather than assuming it:
 *
 *   - --pink #FA57CE is 2.87:1 on white. It is never text and never a button
 *     ground on a light surface. --pink-700 #8E2B74 (7.64:1) carries primary
 *     actions and links; --pink-600 #C93FA3 (4.45:1) carries non-text edges.
 *     Full-strength pink appears on the ink and navy grounds, where it measures
 *     5.83:1 and 4.67:1.
 *   - Exchange's distinguishing ground is navy, not a sixth colour. The palette
 *     rule is that semantic roles are drawn from it and never added to it.
 *
 * test/site-contrast.test.js holds every pairing below to WCAG 2.2 AA.
 */

/* ------------------------------------------------------------------ tokens */
:root {
  --bg: #FFFFFF;
  --blush: #FEF1FA;
  --blush-2: #FBE3F4;
  --card: #FFFFFF;

  --ink: #16174A;
  --ink-2: #6B6C90;
  --ink-3: #9A9BB8;
  --line: rgba(22, 23, 74, .13);
  --line-2: rgba(22, 23, 74, .07);

  --pink: #FA57CE;
  --pink-600: #C93FA3;
  --pink-700: #8E2B74;
  --pink-soft: #FEE6F7;
  --red: #FE1B00;
  --red-soft: #FFE4DF;
  --peach: #FDBE77;
  --peach-soft: #FEF2E3;
  --peach-700: #8A4E0C;
  --orange: #FA7B2C;
  --orange-soft: #FFEADB;
  --orange-700: #B4560F;
  /* One step darker than the application's --orange-700, which is 4.22:1 on its
     own tint and therefore cannot be the label colour on it. This is the cut
     used wherever orange is text: 5.75:1 on the tint and 6.69:1 on white. */
  --orange-800: #94460B;
  --navy: #1A1B8A;
  --navy-soft: #E5E5F6;
  --serious: #D01500;

  /* semantic roles, drawn from the palette and never added to it */
  --accent: var(--pink-700);
  --accent-edge: var(--pink-600);
  --good: var(--navy);
  --warn: var(--orange-800);
  --exchange: var(--navy);

  --r-card: 24px;
  --r-sm: 14px;
  --r-pill: 999px;

  --shadow: 0 1px 2px rgba(22, 23, 74, .04), 0 20px 48px -28px rgba(26, 27, 138, .30);
  --shadow-sm: 0 1px 2px rgba(22, 23, 74, .05), 0 10px 24px -16px rgba(26, 27, 138, .24);
  --focus-ring: 0 0 0 3px rgba(201, 63, 163, .40);

  /* an 8px base, with section rhythm expressed once */
  --pad-x: clamp(20px, 5vw, 48px);
  --sec-y: clamp(56px, 9vw, 128px);
  --wrap: 1280px;
  --wrap-narrow: 760px;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 17px/1.65 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  /* Deliberately no `overflow-x: hidden` here. It was measured against every
     page at 320-1728 and nothing needs it: the wide tables and the pipeline
     board scroll inside their own containers. Clipping at the body would only
     hide the next overflow bug instead of showing it, and it interferes with
     position: sticky. */
}
h1, h2, h3, h4, h5 { font-family: Epilogue, system-ui, sans-serif; letter-spacing: -.032em; margin: 0; line-height: 1.1; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
img, svg, video { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
strong, b { font-weight: 700; }

/* Focus is visible for the keyboard and absent for the mouse. Everything on
   this site is reachable by keyboard, so it has to be obvious where you are. */
:focus { outline: none; }
:focus-visible {
  outline: 2.5px solid var(--pink-600); outline-offset: 3px; border-radius: 8px;
}

/* Visually hidden, still announced. */
/* Visually hidden, still read aloud. `clip` is deprecated but still the only
   thing some older engines honour, so both are set. */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -80px; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px; border-radius: var(--r-pill);
  font-family: Epilogue, sans-serif; font-weight: 700; text-decoration: none;
  transition: top .15s ease;
}
.skip:focus { top: 12px; }

/* Motion explains sequence; it is never the point. With reduced motion asked
   for, everything below settles instantly in its final state. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ layout */
/* A grid or flex item defaults to min-width:auto, which means it cannot shrink
   below its content's minimum width. Inside one of those, an `overflow-x: auto`
   scroller does not scroll — it pushes its container wider, and the page scrolls
   sideways instead. Every layout container's children therefore opt out.
   Without this, the pipeline board alone widened the document to 1134px on a
   360px phone. */
.split > *, .hero__grid > *, .grid > *, .pillars > *, .plans > *, .points > *,
.today__cols > *, .pipe__detail > *, .composer > *, .xchg > *, .intg > *,
.related > *, .site-foot__in > *, .site-foot__cols > *, .smap__nodes > *,
.trust > *, .stepper > *, .cta-group__buttons > * { min-width: 0; }

/* Long words — a URL in the privacy policy, an email address in a table cell —
   break rather than widening the page. Headings are excluded: a display line
   broken mid-word reads as a mistake, and with the fallback stack in place
   before the webfont arrives, "Recruitment," was splitting after the "t". A
   heading that does not fit should wrap between words or be given more room. */
body { overflow-wrap: break-word; }
h1, h2, h3, h4, h5 { overflow-wrap: normal; word-break: normal; }

.wrap { width: 100%; margin: 0 auto; padding-inline: var(--pad-x); }
.wrap--wide { max-width: var(--wrap); }
.wrap--narrow { max-width: var(--wrap-narrow); }

.sec { padding-block: var(--sec-y); position: relative; }
.sec--plain { background: var(--bg); }
.sec--wash { background: var(--blush); }
.sec--tint { background: linear-gradient(180deg, var(--blush) 0%, #fff 100%); }
.sec--ink { background: var(--ink); color: #fff; }
.sec--exchange { background: var(--navy); color: #fff; }
/* Links on a dark ground go white — but a button is not a link for this
   purpose. Without the :not(.btn), this rule outranks .btn--light by
   specificity and paints white text on a white button. */
.sec--ink a:not(.btn), .sec--exchange a:not(.btn) { color: #fff; }
.sec--tight { padding-block: clamp(40px, 6vw, 80px); }

/* 42ch is the right measure for the lead paragraph and too narrow for a 46px
   heading above it: `ch` is resolved at the container's inherited 17px, so the
   title was folding at about 450px and short sentences broke in half. The
   container carries the title's measure; the lead keeps its own. */
.sec-head { max-width: 54ch; margin-bottom: clamp(32px, 4vw, 56px); }
.sec-head .lead { max-width: 42ch; }
.sec-head--center .lead { margin-inline: auto; }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--wide { max-width: 56ch; }
.sec-head__title { font-size: clamp(30px, 4.2vw, 46px); font-weight: 800; text-wrap: balance; }
.sec--ink .sec-head__title, .sec--exchange .sec-head__title { color: #fff; }

.eyebrow {
  font-family: Epilogue, sans-serif; font-weight: 700; font-size: 12.5px;
  letter-spacing: .10em; text-transform: uppercase; color: var(--pink-700);
  margin: 0 0 14px;
}
.eyebrow--light { color: var(--peach); }
.lead { font-size: clamp(18px, 2vw, 20px); color: var(--ink-2); margin-top: 18px; max-width: 62ch; }
.sec--ink .lead, .sec--exchange .lead { color: rgba(255, 255, 255, .82); }
.sec--ink :where(p), .sec--exchange :where(p) { color: rgba(255, 255, 255, .86); }
.sec--ink :where(h3, h4), .sec--exchange :where(h3, h4) { color: #fff; }

/* ------------------------------------------------------------------ buttons */
/* Pills, matching the application's control language. The website brief
   suggests a 10–14px radius; the approved product brand uses pills, and
   preserving the brand wins that one. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid transparent; border-radius: var(--r-pill);
  padding: 13px 26px; min-height: 48px;
  font-family: Epilogue, sans-serif; font-weight: 700; font-size: 15.5px; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap; text-align: center;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease, color .14s ease;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn--primary { background: var(--pink-700); color: #fff; }
.btn--primary:hover { background: #7a2564; box-shadow: 0 12px 26px -12px rgba(142, 43, 116, .7); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--blush); border-color: var(--pink-600); }
.btn--light { background: #fff; color: var(--pink-700); }
.btn--light:hover { background: var(--blush); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.btn--outline-light:hover { background: rgba(255, 255, 255, .12); }
.btn--sm { padding: 9px 18px; min-height: 40px; font-size: 14px; }
.btn--lg { padding: 16px 32px; min-height: 54px; font-size: 17px; }
.btn--block { width: 100%; }

.cta-group { margin-top: 32px; }
.cta-group__buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-group__note { margin: 14px 0 0; font-size: 14.5px; color: var(--ink-2); }
.cta-group__note--light { color: rgba(255, 255, 255, .72); }

/* ------------------------------------------------------------------ badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--r-pill); padding: 3px 10px;
  font-family: Epilogue, sans-serif; font-weight: 700; font-size: 11.5px;
  letter-spacing: .01em; white-space: nowrap; vertical-align: middle;
}
/* Status is never carried by colour alone: each badge says what it is. */
.badge--available { background: var(--navy-soft); color: var(--navy); }
.badge--private-beta { background: var(--peach-soft); color: var(--peach-700); }
.badge--founding-access { background: var(--pink-soft); color: var(--pink-700); }
.badge--planned { background: rgba(22, 23, 74, .07); color: var(--ink-2); }
.badge--partner-approval-required { background: var(--orange-soft); color: var(--orange-800); }
.badge--xs { font-size: 10.5px; padding: 2px 8px; margin-left: 6px; }
.sec--ink .badge, .sec--exchange .badge { background: rgba(255, 255, 255, .16); color: #fff; }

.avail {
  /* Wraps: "PARTNER APPROVAL REQUIRED" beside a sentence does not fit on a
     320px screen, and the badge is nowrap by design. */
  display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-start;
  background: var(--blush); border-left: 3px solid var(--pink-600);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 12px 16px;
  font-size: 15px; color: var(--ink-2); margin: 20px 0 0;
}
.avail__badge {
  font-family: Epilogue, sans-serif; font-weight: 700; font-size: 12px;
  color: var(--pink-700); white-space: nowrap; text-transform: uppercase; letter-spacing: .06em;
  padding-top: 2px;
}
.sec--ink .avail, .sec--exchange .avail {
  background: rgba(255, 255, 255, .09); border-left-color: var(--peach); color: rgba(255, 255, 255, .84);
}
.sec--ink .avail__badge, .sec--exchange .avail__badge { color: var(--peach); }

/* ------------------------------------------------------------------ header */
.announce { background: var(--ink); color: #fff; font-size: 14.5px; }
.announce__in {
  max-width: var(--wrap); margin: 0 auto; padding: 10px var(--pad-x);
  display: flex; align-items: center; justify-content: center; gap: 16px; position: relative;
}
.announce p { margin: 0; text-align: center; color: rgba(255, 255, 255, .9); }
.announce a { color: #fff; font-weight: 700; }
.announce__x {
  position: absolute; right: var(--pad-x); background: transparent; border: none;
  color: rgba(255, 255, 255, .7); padding: 6px; border-radius: 8px; display: grid; place-items: center;
  min-width: 32px; min-height: 32px;
}
.announce__x:hover { color: #fff; background: rgba(255, 255, 255, .12); }

.site-head {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-2);
}
.site-head__in {
  max-width: var(--wrap); margin: 0 auto; padding: 12px var(--pad-x);
  display: flex; align-items: center; gap: 18px;
}
.site-head__brand { text-decoration: none; flex: none; }
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: Epilogue, sans-serif; font-weight: 800; font-size: 20px;
  letter-spacing: -.045em; color: var(--ink);
}
.wordmark .nm { display: inline-flex; align-items: baseline; }
.wordmark .tld { font-weight: 500; color: var(--ink-2); }
.wordmark.on-dark { color: #fff; }
.wordmark.on-dark .tld { color: rgba(255, 255, 255, .6); }

.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav__link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 13px; border-radius: var(--r-pill);
  font-family: Epilogue, sans-serif; font-weight: 600; font-size: 14.5px;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.nav__link:hover { background: var(--blush); text-decoration: none; }
.nav__link.is-current { color: var(--pink-700); }
.nav__login {
  font-family: Epilogue, sans-serif; font-weight: 600; font-size: 14.5px;
  color: var(--ink); text-decoration: none; padding: 9px 12px; white-space: nowrap;
}
.nav__login:hover { color: var(--pink-700); }
.site-head__actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* The mega menu is a <details>: it opens on click and on Enter with no script,
   and the script only closes siblings, Escape and outside clicks. */
.mega { position: relative; }
.mega > summary { list-style: none; cursor: pointer; }
.mega > summary::-webkit-details-marker { display: none; }
.mega[open] > summary { background: var(--blush); }
.mega[open] .mega__chev { transform: rotate(180deg); }
.mega__chev { transition: transform .15s ease; }
.mega__panel {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  width: min(720px, calc(100vw - 32px));
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 24px; z-index: 110;
}
.mega__intro {
  font-family: Epilogue, sans-serif; font-weight: 700; font-size: 13px;
  color: var(--ink-2); margin: 0 0 16px;
}
.mega__grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.mega__grid a {
  display: block; padding: 11px 13px; border-radius: var(--r-sm); text-decoration: none; color: var(--ink);
}
.mega__grid a:hover { background: var(--blush); }
.mega__label { display: block; font-family: Epilogue, sans-serif; font-weight: 700; font-size: 15px; }
.mega__blurb { display: block; font-size: 14px; color: var(--ink-2); margin-top: 2px; line-height: 1.45; }

.burger {
  display: none; margin-left: auto; background: transparent; border: 1.5px solid var(--line);
  border-radius: var(--r-pill); color: var(--ink); padding: 9px 12px; min-height: 44px; min-width: 44px;
  align-items: center; justify-content: center;
}
.mobile-nav { display: none; border-top: 1px solid var(--line-2); background: #fff; }
.mobile-nav nav { padding: 12px var(--pad-x) 28px; max-height: calc(100vh - 140px); overflow-y: auto; }
.mnav__link, .mnav__group > summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 4px; border-bottom: 1px solid var(--line-2);
  font-family: Epilogue, sans-serif; font-weight: 700; font-size: 17px;
  color: var(--ink); text-decoration: none; cursor: pointer; list-style: none;
}
.mnav__group > summary::-webkit-details-marker { display: none; }
.mnav__group[open] > summary svg { transform: rotate(180deg); }
.mnav__group > summary svg { transition: transform .15s ease; }
.mnav__group ul { list-style: none; padding: 4px 0 12px; }
.mnav__group li a {
  display: block; padding: 11px 4px 11px 16px; color: var(--ink-2);
  text-decoration: none; font-size: 16px; font-weight: 600;
  border-left: 2px solid var(--line);
}
.mnav__cta { margin-top: 20px; width: 100%; }

@media (max-width: 1080px) {
  .nav, .site-head__actions { display: none; }
  .burger { display: inline-flex; }
  .mobile-nav { display: block; }
  .mobile-nav[hidden] { display: none; }
}

/* ------------------------------------------------------------------ hero */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 6vw, 80px); position: relative; overflow: hidden; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(900px 520px at 88% -8%, var(--blush-2) 0%, transparent 68%),
    radial-gradient(760px 480px at -8% 104%, var(--peach-soft) 0%, transparent 66%);
}
.hero__grid { display: grid; gap: clamp(32px, 4vw, 56px); align-items: center; }
.hero__title {
  /* 60px rather than 70px at the top end. The headline shares the row with a
     product screenshot, so it never gets the full measure, and at 70px a plain
     sentence broke into five lines of two words. */
  font-size: clamp(36px, 4.6vw, 60px); font-weight: 800; line-height: 1.05; letter-spacing: -.038em;
  max-width: 15ch;
  /* Balanced across its lines where the browser supports it, so a three-line
     headline does not end on one orphaned word. Ignored elsewhere. */
  text-wrap: balance;
}
.hero__sub { font-size: clamp(18px, 2.1vw, 21px); color: var(--ink-2); margin-top: 22px; max-width: 46ch; }
.hero__note { margin-top: 18px; font-size: 15px; color: var(--ink-2); }
.hero__assurances {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 32px;
  padding-top: 24px; border-top: 1px solid var(--line-2);
}
.hero__assurances li {
  display: flex; align-items: center; gap: 8px;
  font-family: Epilogue, sans-serif; font-weight: 700; font-size: 14px; color: var(--ink-2);
}
.hero__assurances svg { color: var(--pink-600); flex: none; }
.hero__art { position: relative; }

@media (min-width: 900px) {
  /* Nearly even. The screenshot is legible from 540px up, and the extra
     80px on the left is the difference between a three-line headline and a
     five-line one. */
  .hero__grid { grid-template-columns: 6fr 7fr; }
}

/* ------------------------------------------------------------------ cards */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: clamp(22px, 2.6vw, 32px); box-shadow: var(--shadow-sm);
}
/* Container defaults, wrapped in :where() so they contribute no specificity.
   Written as `.card p` they are 0,1,1 and outrank a class on the element
   itself — which is how .plan__price ended up rendering at body size inside a
   card. Anything with its own class now wins, as it should. */
.card :where(h2, h3) { font-size: 21px; font-weight: 700; margin-bottom: 10px; }
.card :where(p) { color: var(--ink-2); font-size: 16px; }
.card--wash { background: var(--blush); box-shadow: none; }
.card--ink { background: var(--ink); border-color: transparent; color: #fff; }
.card--ink :where(p) { color: rgba(255, 255, 255, .8); }
.card--exchange { background: var(--navy); border-color: transparent; color: #fff; }
.card--exchange :where(p) { color: rgba(255, 255, 255, .82); }
/* A status badge on a dark card needs the dark-ground treatment, the same as
   one inside a dark section. Its light tint on navy is unreadable. */
.card--ink .badge, .card--exchange .badge { background: rgba(255, 255, 255, .18); color: #fff; }
.card--quiet { box-shadow: none; }

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }

.points { list-style: none; display: grid; gap: 24px; }
.points--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.points--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.points--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.points__item { border-top: 2px solid var(--pink-600); padding-top: 16px; }
.points__item h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.points__item p { color: var(--ink-2); font-size: 16px; margin: 0; }
.sec--ink .points__item, .sec--exchange .points__item { border-top-color: var(--peach); }
.sec--ink .points__item :where(p), .sec--exchange .points__item :where(p) { color: rgba(255, 255, 255, .8); }

.callout {
  display: flex; gap: 14px; align-items: flex-start;
  border-radius: var(--r-card); padding: 20px 24px; margin: 28px 0;
  background: var(--blush); border: 1px solid var(--line-2);
}
.callout--warn { background: var(--orange-soft); border-color: rgba(148, 70, 11, .3); }
.callout--deep { background: var(--ink); color: #fff; border-color: transparent; }
.callout--deep :where(p) { color: rgba(255, 255, 255, .85); }
.callout__icon { flex: none; margin-top: 3px; color: var(--pink-700); }
.callout--deep .callout__icon { color: var(--peach); }
.callout__title { font-family: Epilogue, sans-serif; font-weight: 700; margin: 0 0 6px; }
.callout :where(p) { font-size: 16px; color: var(--ink-2); }
.callout--deep .callout__title { color: #fff; }

/* ------------------------------------------------------------------ steppers */
.stepper { list-style: none; display: grid; gap: 24px; counter-reset: step; }
.stepper__step { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.stepper__n {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--r-pill);
  background: var(--ink); color: #fff;
  font-family: Epilogue, sans-serif; font-weight: 800; font-size: 15px;
}
.stepper__title { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.stepper__body p { color: var(--ink-2); font-size: 16px; }
.stepper__detail { font-size: 15px; color: var(--ink-3); margin-top: 6px; }
.sec--ink .stepper__n, .sec--exchange .stepper__n { background: var(--peach); color: var(--ink); }
.sec--ink .stepper__body :where(p), .sec--exchange .stepper__body :where(p) { color: rgba(255, 255, 255, .8); }
.sec--ink .stepper__detail, .sec--exchange .stepper__detail { color: rgba(255, 255, 255, .62); }

@media (min-width: 900px) {
  .stepper--row { grid-template-columns: repeat(5, 1fr); gap: 20px; }
  .stepper--row .stepper__step { grid-template-columns: 1fr; }
  .stepper--row .stepper__step { position: relative; padding-top: 8px; }
  /* the connecting line that says these are one sequence, not five cards */
  .stepper--row .stepper__step::before {
    content: ''; position: absolute; top: 27px; left: 46px; right: -20px; height: 2px;
    background: var(--line); z-index: 0;
  }
  .stepper--row .stepper__step:last-child::before { display: none; }
  .stepper--row .stepper__n { position: relative; z-index: 1; }
  .stepper--row-4 { grid-template-columns: repeat(4, 1fr); }
  .stepper--row-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------------ accordion */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; cursor: pointer; list-style: none;
  font-family: Epilogue, sans-serif; font-weight: 700; font-size: 18px; color: var(--ink);
  min-height: 48px;
}
.acc__item > summary::-webkit-details-marker { display: none; }
.acc__item > summary:hover { color: var(--pink-700); }
.acc__item > summary svg { flex: none; color: var(--ink-2); transition: transform .18s ease; }
.acc__item[open] > summary svg { transform: rotate(180deg); }
.acc__body { padding: 0 4px 24px; max-width: 68ch; }
.acc__body p { color: var(--ink-2); font-size: 16.5px; margin: 0; }

/* ------------------------------------------------------------------ screens */
/* The frame every reconstructed product surface sits in. */
.screen { margin: 0; min-width: 0; }
.screen__frame {
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow); overflow: hidden; min-width: 0;
}
.screen__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; background: var(--blush); border-bottom: 1px solid var(--line-2);
}
.screen__dots { display: inline-flex; gap: 5px; }
.screen__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.screen__title { font-family: Epilogue, sans-serif; font-weight: 700; font-size: 12.5px; color: var(--ink-2); }
/* The wide tables and the eight-column pipeline scroll inside here rather than
   taking the page with them. */
.screen__body {
  position: relative; padding: clamp(16px, 2vw, 24px); overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; }
.screen__cap { margin: 12px 2px 0; font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
.screen--dark .screen__frame { background: #1E1F5C; border-color: rgba(255, 255, 255, .16); }
.screen--dark .screen__bar { background: rgba(255, 255, 255, .07); border-bottom-color: rgba(255, 255, 255, .1); }
.screen--dark .screen__title { color: rgba(255, 255, 255, .7); }
.sec--ink .screen__cap, .sec--exchange .screen__cap { color: rgba(255, 255, 255, .6); }

/* Callout pins on a product screen. Positioned relative to the figure, and
   hidden below the width where they would overlap the thing they point at. */
.pin {
  display: none; font-size: 13.5px; color: var(--ink-2); margin: 14px 0 0;
  padding-left: 30px; position: relative; line-height: 1.45;
}
.pin span {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--pink-700); color: #fff; display: grid; place-items: center;
  font-family: Epilogue, sans-serif; font-weight: 800; font-size: 12px;
}
@media (min-width: 720px) { .pin { display: block; } }

/* ------------------------------------------------------------------ Today */
.today__cols { display: grid; gap: 24px; }
@media (min-width: 760px) { .today__cols { grid-template-columns: 1.15fr 1fr; } }
.today__h {
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-2); margin: 0 0 12px;
}
.today__h + .today__h { margin-top: 22px; }
.tasklist, .signals, .risklist { list-style: none; display: grid; gap: 8px; }
.tasklist__item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  background: var(--blush); border-radius: var(--r-sm); padding: 11px 14px; font-size: 14.5px;
}
.tasklist__flag { width: 4px; height: 30px; border-radius: 2px; background: var(--ink-3); }
.tasklist__item--serious .tasklist__flag { background: var(--serious); }
.tasklist__item--warn .tasklist__flag { background: var(--orange); }
.tasklist__body b { display: block; font-weight: 700; font-size: 14.5px; line-height: 1.35; }
.tasklist__body span { font-size: 13px; color: var(--ink-2); }
.tasklist__when { font-size: 12.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.tasklist__item--serious .tasklist__when { color: var(--serious); }

.signals { grid-template-columns: 1fr 1fr; }
.signals__item {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px;
}
.signals__v { display: block; font-family: Epilogue, sans-serif; font-weight: 800; font-size: 26px; color: var(--navy); }
.signals__l { display: block; font-size: 13px; font-weight: 700; }
.signals__d { display: block; font-size: 12px; color: var(--ink-2); margin-top: 2px; line-height: 1.4; }

.risklist__item {
  font-size: 14px; padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--peach-soft); color: var(--peach-700); border-left: 3px solid var(--orange);
}
.risklist__item--good { background: var(--navy-soft); color: var(--navy); border-left-color: var(--navy); }

/* ------------------------------------------------------------------ search demo */
.sdemo__q {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  background: var(--blush); border: 1.5px solid var(--pink-600); border-radius: var(--r-sm);
  padding: 14px 16px; margin: 0 0 20px;
}
.sdemo__qlabel {
  font-family: Epilogue, sans-serif; font-weight: 700; font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--pink-700);
}
.sdemo__qtext { font-size: 16px; font-weight: 600; }
.sdemo__stage + .sdemo__stage { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line-2); }
.sdemo__h {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); margin: 0 0 12px;
}
.sdemo__h span { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--ink-3); margin-left: 8px; }
.sdemo__filters { font-size: 14.5px; }
.sdemo__filters th, .sdemo__filters td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-2); }
.sdemo__filters thead th {
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); font-weight: 700;
}
.sdemo__filters tbody th { font-weight: 700; width: 30%; }
.sdemo__from { color: var(--ink-3); font-size: 13.5px; }
.sdemo__edit { font-size: 14px; color: var(--ink-2); margin: 14px 0 0; }
.sdemo__pill {
  display: inline-block; background: var(--ink); color: #fff; border-radius: var(--r-pill);
  padding: 4px 12px; font-family: Epilogue, sans-serif; font-weight: 700; font-size: 12px; margin-right: 8px;
}
.sdemo__foot { font-size: 13.5px; color: var(--ink-3); margin: 14px 0 0; }

.sresults { list-style: none; display: grid; gap: 12px; }
.sresult {
  display: grid; grid-template-columns: auto 1fr; gap: 14px;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 14px 16px;
}
.sresult__av {
  width: 38px; height: 38px; border-radius: 50%; background: var(--peach); color: var(--ink);
  display: grid; place-items: center; font-family: Epilogue, sans-serif; font-weight: 800; font-size: 13px;
}
.sresult__name { font-family: Epilogue, sans-serif; font-weight: 700; font-size: 15.5px; margin: 0 0 6px; }
.sresult__name span { display: block; font-family: inherit; font-weight: 600; font-size: 13.5px; color: var(--ink-2); }
.sresult__why { font-size: 14.5px; margin: 0 0 8px; }
.sresult__missing { font-size: 13.5px; color: var(--orange-800); margin: 8px 0 0; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  background: var(--blush); border-radius: var(--r-pill); padding: 3px 10px;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
}

/* ------------------------------------------------------------------ pipeline */
.pipe__cols {
  list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(128px, 1fr);
  gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px;
}
.pipe__cols:focus-visible { outline: 2.5px solid var(--pink-600); outline-offset: 2px; border-radius: 8px; }
.pipe__col { background: var(--blush); border-radius: var(--r-sm); padding: 10px; min-height: 128px; }
@media (max-width: 760px) { .pipe__col { min-height: 96px; } }
.pipe__col--key { background: var(--red-soft); }
.pipe__h {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  font-family: Epilogue, sans-serif; font-weight: 700; font-size: 12px; margin: 0 0 10px;
}
.pipe__h span {
  background: #fff; border-radius: var(--r-pill); padding: 1px 8px; font-size: 11px; color: var(--ink-2);
}
.pcard { background: #fff; border: 1.5px solid var(--pink-600); border-radius: 12px; padding: 10px; }
.pcard__av {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--peach); font-family: Epilogue, sans-serif; font-weight: 800; font-size: 10.5px; margin-bottom: 6px;
}
.pcard__n { font-family: Epilogue, sans-serif; font-weight: 700; font-size: 12.5px; margin: 0; }
.pcard__r { font-size: 11.5px; color: var(--ink-2); margin: 2px 0 0; line-height: 1.35; }
.pcard__o { font-size: 11px; color: var(--ink-3); margin: 4px 0 0; }

.pipe__detail { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 760px) { .pipe__detail { grid-template-columns: 1fr 1fr; } }
.pipe__panel { background: var(--blush); border-radius: var(--r-sm); padding: 16px 18px; }
.pipe__panel-h { font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 12px; }
.tline { list-style: none; display: grid; gap: 10px; counter-reset: t; }
.tline li { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }
.tline li b { display: block; color: var(--ink); font-weight: 700; font-size: 14px; }
.tline__k {
  display: inline-block; background: #fff; border-radius: var(--r-pill); padding: 1px 9px;
  font-size: 11px; font-weight: 700; color: var(--ink-2); margin-right: 6px;
}

/* ------------------------------------------------------------------ Exchange */
.xchg { display: grid; gap: 16px; align-items: stretch; }
@media (min-width: 900px) { .xchg { grid-template-columns: 1fr 1.4fr 1fr; } }
.xchg__side {
  background: rgba(255, 255, 255, .07); border: 1.5px dashed rgba(255, 255, 255, .34);
  border-radius: var(--r-card); padding: 22px;
}
.xchg__label { font-family: Epilogue, sans-serif; font-weight: 700; font-size: 14px; color: #fff; margin: 0 0 14px; }
.xchg__list { list-style: none; display: grid; gap: 7px; }
.xchg__list li { font-size: 14.5px; color: rgba(255, 255, 255, .8); padding-left: 16px; position: relative; }
.xchg__list li::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--peach);
}
.xchg__seal {
  margin: 16px 0 0; font-family: Epilogue, sans-serif; font-weight: 700; font-size: 12px;
  letter-spacing: .07em; text-transform: uppercase; color: var(--peach);
}
.xchg__gate { background: #fff; border-radius: var(--r-card); padding: 24px; }
.xchg__gatelabel {
  font-family: Epilogue, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pink-700); margin: 0 0 16px;
}
.xchg__steps { list-style: none; display: grid; gap: 14px; counter-reset: x; }
.xchg__steps li { padding-left: 30px; position: relative; }
.xchg__steps li::before {
  counter-increment: x; content: counter(x);
  position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%;
  background: var(--ink); color: #fff; display: grid; place-items: center;
  font-family: Epilogue, sans-serif; font-weight: 800; font-size: 11.5px;
}
.xchg__steps b { display: block; font-family: Epilogue, sans-serif; font-size: 15px; color: var(--ink); }
.xchg__steps span { display: block; font-size: 14px; color: var(--ink-2); line-height: 1.5; margin-top: 2px; }
.xchg__foot { margin: 20px 0 0; font-size: 15px; color: rgba(255, 255, 255, .78); max-width: 70ch; }

/* ------------------------------------------------------------------ tables */
/* `position: relative` is load-bearing, not decoration. The screen-reader
   labels inside these tables are `position: absolute`, and without a positioned
   ancestor they anchor to the page instead of the scroller: on a phone the
   pricing table's hidden labels sat 558px from the left of the document and
   dragged the whole page sideways, while the table they belong to scrolled
   correctly. */
.tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; position: relative; }
/* A scroll container that holds content has to be reachable by keyboard, or
   the columns past the edge are unreachable without a pointer. */
.tblwrap:focus-visible { outline: 2.5px solid var(--pink-600); outline-offset: 2px; border-radius: 8px; }
.tblwrap-outer { min-width: 0; }
.scroll-hint {
  display: none; margin: 0 0 8px;
  font-family: Epilogue, sans-serif; font-weight: 700; font-size: 12.5px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2);
}
.scroll-hint span { color: var(--pink-700); }
/* Shown only where the table cannot fit. Above this the columns are all
   visible and the hint would be a lie. */
@media (max-width: 760px) { .scroll-hint { display: block; } }
.scroll-hint--in-screen { margin: 0; padding: 10px clamp(16px, 2vw, 24px) 0; }
.screen__body:focus-visible { outline: 2.5px solid var(--pink-600); outline-offset: -3px; }
.sec--ink .scroll-hint, .sec--exchange .scroll-hint { color: rgba(255, 255, 255, .7); }
.sec--ink .scroll-hint span, .sec--exchange .scroll-hint span { color: var(--peach); }
.mig__table, .ddesk__table { font-size: 14.5px; min-width: 560px; }
.mig__table th, .mig__table td, .ddesk__table th, .ddesk__table td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-2); vertical-align: top;
}
.mig__table thead th, .ddesk__table thead th {
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); font-weight: 700;
}
.mig__table tbody th, .ddesk__table tbody th { font-weight: 700; }
.mig__note, .ddesk__ev { color: var(--ink-2); font-size: 13.5px; }
.mig__recon { margin-top: 22px; background: var(--blush); border-radius: var(--r-sm); padding: 18px 20px; }
.mig__recon-h { font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 12px; }
.mig__recon ul { list-style: none; display: grid; gap: 9px; }
.mig__recon li { font-size: 14.5px; color: var(--ink-2); }
.mig__recon li b { color: var(--ink); }
.ddesk__fee { font-weight: 700; }
.ddesk__row--serious th { border-left: 3px solid var(--serious); }
.ddesk__row--warn th { border-left: 3px solid var(--orange); }
.ddesk__row--good th { border-left: 3px solid var(--navy); }
.ddesk__foot { font-size: 13.5px; color: var(--ink-3); margin: 14px 0 0; }

/* ------------------------------------------------------------------ composer */
.composer { display: grid; gap: 18px; }
@media (min-width: 760px) { .composer { grid-template-columns: 1.2fr 1fr; } }
.composer__doc { background: var(--blush); border-radius: var(--r-sm); padding: 18px 20px; }
.composer__field { display: flex; gap: 10px; font-size: 14.5px; margin: 0 0 8px; }
.composer__field span {
  font-family: Epilogue, sans-serif; font-weight: 700; font-size: 11.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-2); min-width: 74px; padding-top: 3px;
}
.composer__body { font-size: 14.5px; color: var(--ink-2); margin: 14px 0 0; }
.composer__channels { list-style: none; display: grid; gap: 8px; align-content: start; }
.chan {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 14px; font-size: 14px;
}
.chan b { grid-column: 2; font-family: Epilogue, sans-serif; font-size: 14px; }
.chan span:not(.chan__dot) { grid-column: 2; font-size: 13px; color: var(--ink-2); }
.chan__dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; background: var(--ink-3); grid-row: span 2; }
.chan--on .chan__dot { background: var(--navy); }
.chan--wait .chan__dot { background: var(--orange); }
.chan--off .chan__dot { background: var(--ink-3); }

/* ------------------------------------------------------------------ system map */
.smap__nodes { list-style: none; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.smap__node { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 18px; }
.smap__node h3 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
.smap__node p { font-size: 14.5px; color: var(--ink-2); margin: 0; }
.smap__boundary {
  margin: 18px 0 0; padding: 16px 20px; border: 2px dashed var(--pink-600);
  border-radius: var(--r-card); font-size: 15px; color: var(--ink-2);
}
.smap__boundary b { color: var(--ink); display: block; font-family: Epilogue, sans-serif; }

/* ------------------------------------------------------------------ pillars */
.pillars { display: grid; gap: 18px; }
@media (min-width: 860px) {
  /* The OS card is dominant and holds the left column on its own; the other
     three stack beside it. Spanning two rows rather than three leaves the
     fourth card wrapping onto a new row with an empty cell next to it. */
  .pillars { grid-template-columns: 1fr 1fr; }
  .pillars > :first-child { grid-row: span 3; }
}
.pillar { display: flex; flex-direction: column; }
.pillar__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pillar :where(h2, h3) { font-size: clamp(22px, 2.4vw, 28px); margin: 0; }
/* Nothing in a pillar stretches. The learn-more link is pushed to the bottom
   with margin-top:auto instead, which aligns the actions across a row without
   opening a hole in the middle of the tallest card. */
.pillar__more {
  /* Pushed to the bottom of the card, so the action sits on the same line in
     every card of a row regardless of how much copy is above it. */
  margin-top: auto; padding-top: 18px;
  font-family: Epilogue, sans-serif; font-weight: 700; font-size: 15px;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
}
.pillar__list { list-style: none; display: grid; gap: 10px; margin: 18px 0 0; }
.pillar__list li { font-size: 15px; color: var(--ink-2); line-height: 1.5; padding-left: 16px; position: relative; }
.pillar__list li::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px;
  border-radius: 50%; background: var(--pink-600);
}
.pillar__list b { color: var(--ink); font-weight: 700; }
.pillar--os { border: 2px solid var(--pink-600); }
.pillar--os .pillar__boundary {
  margin-top: 18px; padding: 12px 16px; border: 1.5px dashed var(--pink-600);
  border-radius: var(--r-sm); font-size: 14px; color: var(--ink-2);
}
.card--exchange .pillar__more, .card--ink .pillar__more { color: var(--peach); }

/* ------------------------------------------------------------------ trust */
.trust { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.trust__item { border: 1px solid var(--line); border-radius: var(--r-sm); }
.trust__item > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 18px; cursor: pointer; list-style: none; min-height: 48px;
  font-family: Epilogue, sans-serif; font-weight: 700; font-size: 15.5px;
}
.trust__item > summary::-webkit-details-marker { display: none; }
.trust__item > summary svg { flex: none; color: var(--pink-600); transition: transform .18s ease; }
.trust__item[open] > summary svg { transform: rotate(45deg); }
.trust__body { padding: 0 18px 18px; font-size: 14.5px; color: var(--ink-2); }
.trust__body a { font-weight: 700; }

/* ------------------------------------------------------------------ pricing */
.plans { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); align-items: start; }
.plan { position: relative; display: flex; flex-direction: column; }
.plan--rec { border: 2px solid var(--pink-600); box-shadow: var(--shadow); }
.plan__tag {
  position: absolute; top: -13px; left: 24px; background: var(--pink-700); color: #fff;
  border-radius: var(--r-pill); padding: 4px 14px;
  font-family: Epilogue, sans-serif; font-weight: 700; font-size: 12px;
}
.plan :where(h2, h3) { font-size: 22px; margin-bottom: 6px; }
.plan__who { font-size: 14.5px; color: var(--ink-2); min-height: 3em; }
.plan__price {
  font-family: Epilogue, sans-serif; font-weight: 800; font-size: 34px; letter-spacing: -.04em;
  margin: 16px 0 2px; color: var(--ink);
}
.plan__gst { font-size: 13.5px; color: var(--ink-2); margin: 0 0 4px; }
.plan__users { font-size: 14px; color: var(--ink-2); margin: 0 0 20px; }
.plan__list { list-style: none; display: grid; gap: 9px; margin: 0 0 24px; flex: 1; }
.plan__list li { display: grid; grid-template-columns: auto 1fr; gap: 9px; font-size: 15px; color: var(--ink-2); }
.plan__list svg { color: var(--navy); margin-top: 5px; }

.cmp { font-size: 15px; min-width: 640px; }
.cmp caption { text-align: left; font-family: Epilogue, sans-serif; font-weight: 700; font-size: 17px; padding: 24px 0 12px; }
.cmp th, .cmp td { padding: 11px 12px; border-bottom: 1px solid var(--line-2); text-align: left; }
.cmp thead th { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.cmp tbody th { font-weight: 600; color: var(--ink); width: 38%; }
.cmp td { color: var(--ink-2); }
.cmp .yes { color: var(--navy); font-weight: 700; }
.cmp .no { color: var(--ink-3); }

.charges { list-style: none; display: grid; gap: 14px; }
.charge { display: grid; gap: 6px; border-left: 3px solid var(--pink-600); padding: 4px 0 4px 18px; }
.charge__name { font-family: Epilogue, sans-serif; font-weight: 700; font-size: 17px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.charge__amount { font-family: Epilogue, sans-serif; font-weight: 800; font-size: 20px; color: var(--pink-700); }
.charge__unit { font-size: 14px; color: var(--ink-2); }
.charge__note { font-size: 14.5px; color: var(--ink-2); margin: 4px 0 0; }

.fee-example { background: var(--blush); border-radius: var(--r-card); padding: clamp(20px, 3vw, 32px); }
.fee-example h3 { font-size: 19px; margin-bottom: 6px; }
.fee-example__rows { list-style: none; display: grid; gap: 0; margin: 18px 0 0; }
.fee-example__rows li {
  display: flex; justify-content: space-between; gap: 16px; padding: 11px 0;
  border-bottom: 1px solid var(--line-2); font-size: 15.5px;
}
.fee-example__rows li:last-child { border-bottom: none; }
.fee-example__rows b { font-family: Epilogue, sans-serif; }
.fee-example__rows .total { border-top: 2px solid var(--ink); font-weight: 700; }
.fee-example__assume { font-size: 13.5px; color: var(--ink-2); margin: 16px 0 0; }

/* ------------------------------------------------------------------ integrations */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filters__btn {
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-pill);
  padding: 8px 16px; min-height: 40px;
  font-family: Epilogue, sans-serif; font-weight: 600; font-size: 14px; color: var(--ink);
}
.filters__btn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.intg { list-style: none; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.intg__card { border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px 22px; background: #fff; }
.intg__card--owned { border-color: var(--pink-600); border-width: 2px; }
.intg__head { display: flex; justify-content: space-between; gap: 12px; align-items: start; margin-bottom: 10px; }
.intg__name { font-family: Epilogue, sans-serif; font-weight: 700; font-size: 17px; margin: 0; }
.intg__detail { font-size: 14.5px; color: var(--ink-2); margin: 0 0 14px; }
.intg__meta { list-style: none; display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); }
.intg__meta b { color: var(--ink); font-weight: 700; }
.intg__empty { padding: 28px; text-align: center; color: var(--ink-2); }

/* ------------------------------------------------------------------ forms */
/* Named lead-form rather than lead: `.lead` is already the typographic intro
   paragraph, and a script asking for `.lead` was picking up a <p>. */
.lead-form { display: grid; gap: 20px; max-width: 560px; }
.field { display: grid; gap: 6px; }
.field label {
  font-family: Epilogue, sans-serif; font-weight: 700; font-size: 14.5px; color: var(--ink);
}
.field__opt, .field__hint { font-weight: 400; color: var(--ink-2); font-size: 13.5px; }
.field__hint { margin: 0; line-height: 1.5; }
.field__err { margin: 0; font-size: 13.5px; color: var(--serious); font-weight: 700; }
.req { color: var(--serious); }
.field input[type="text"], .field input[type="email"], .field select, .field textarea {
  width: 100%; padding: 12px 14px; min-height: 48px;
  border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff;
  font: inherit; font-size: 16px; color: var(--ink);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--pink-600); box-shadow: var(--focus-ring); outline: none;
}
.field[data-invalid="true"] input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea {
  border-color: var(--serious);
}
.field--check { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.field--check input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--pink-700); }
.field--check label { font-weight: 400; font-family: inherit; font-size: 15px; color: var(--ink-2); }
.field--check .field__err { grid-column: 1 / -1; }
.lead-form__errors {
  background: var(--red-soft); border: 1.5px solid var(--serious); border-radius: var(--r-sm);
  padding: 14px 18px; color: var(--serious); font-size: 15px;
}
.lead-form__errors h2 { font-size: 16px; margin-bottom: 8px; color: var(--serious); }
.lead-form__errors ul { list-style: disc; padding-left: 20px; }
.lead-form__errors a { color: var(--serious); font-weight: 700; }
.lead-form__collection { font-size: 13.5px; color: var(--ink-2); margin: 0; }
.lead-form__submit { justify-self: start; }
.lead[data-state="sending"] .lead-form__submit { opacity: .6; pointer-events: none; }
/* The honeypot: off-screen for a browser, ignored by assistive technology
   because the wrapper is aria-hidden, and never tabbable. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-done {
  background: var(--navy-soft); border-radius: var(--r-card); padding: clamp(22px, 3vw, 32px);
  border-left: 4px solid var(--navy);
}
.form-done h2 { font-size: 22px; margin-bottom: 10px; }
.form-done ol { padding-left: 20px; display: grid; gap: 8px; color: var(--ink-2); }

/* ------------------------------------------------------------------ photos */
/* A photograph. `aspect-ratio` comes from the manifest and the intrinsic width
   and height are on the element, so the space is held before the bytes land and
   nothing shifts under the reader. */
.photo {
  border-radius: var(--r-card); width: 100%; height: auto;
  object-fit: cover; background: var(--blush);
}
picture { display: block; min-width: 0; }

/* ------------------------------------------------------------------ prose */
.prose { max-width: 68ch; font-size: 17.5px; }
.prose h2 { font-size: clamp(24px, 3vw, 30px); margin: 44px 0 14px; }
.prose h3 { font-size: 20px; margin: 30px 0 10px; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 8px; margin: 0 0 20px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose > :first-child { margin-top: 0; }
.prose__meta {
  display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--ink-2);
  padding-bottom: 20px; margin-bottom: 28px; border-bottom: 1px solid var(--line);
}
.draft-notice {
  background: var(--orange-soft); border-left: 4px solid var(--orange-800);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 18px 22px; margin: 0 0 32px;
}
.draft-notice p { color: var(--peach-700); font-size: 15.5px; }
.draft-notice strong { color: var(--peach-700); }

.crumbs { padding-block: 20px 0; font-size: 14px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; color: var(--ink-2); }
.crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); }

.related { list-style: none; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.related a {
  display: block; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 16px 18px;
  text-decoration: none; color: var(--ink);
}
.related a:hover { border-color: var(--pink-600); background: var(--blush); }
.related b { display: block; font-family: Epilogue, sans-serif; font-size: 15.5px; }
.related span { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 3px; }

/* ------------------------------------------------------------------ final CTA */
.final-cta { text-align: center; }
.final-cta__title { font-size: clamp(30px, 4.6vw, 52px); font-weight: 800; color: #fff; max-width: 18ch; margin: 0 auto; }
.final-cta__body { margin: 20px auto 0; max-width: 56ch; font-size: 18px; }
.final-cta .cta-group__buttons { justify-content: center; }

/* ------------------------------------------------------------------ footer */
.site-foot { background: var(--ink); color: #fff; padding-block: clamp(48px, 6vw, 80px) 0; }
.site-foot__in {
  max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad-x);
  display: grid; gap: 40px;
}
@media (min-width: 900px) { .site-foot__in { grid-template-columns: 320px 1fr; } }
.site-foot__trust {
  font-family: Epilogue, sans-serif; font-weight: 700; font-size: 16px;
  color: var(--peach); margin: 20px 0 10px;
}
.site-foot__aus { font-size: 14.5px; color: rgba(255, 255, 255, .7); }
.site-foot__contact a { color: #fff; font-size: 14.5px; }
.site-foot__cols { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.site-foot__coltitle {
  font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55); margin: 0 0 14px;
}
.site-foot__col ul { list-style: none; display: grid; gap: 9px; }
.site-foot__col a { color: rgba(255, 255, 255, .86); font-size: 14.5px; text-decoration: none; }
.site-foot__col a:hover { color: #fff; text-decoration: underline; }
.site-foot__bar {
  max-width: var(--wrap); margin: 48px auto 0; padding: 22px var(--pad-x) 32px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between;
  font-size: 13.5px; color: rgba(255, 255, 255, .6);
}
.site-foot__bar p { margin: 0; }
.site-foot__legal { display: flex; flex-wrap: wrap; gap: 18px; }
.site-foot__legal a { color: rgba(255, 255, 255, .72); text-decoration: none; }
.site-foot__legal a:hover { color: #fff; text-decoration: underline; }

/* ------------------------------------------------------------------ utility */
.split { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 900px) {
  .split--5-7 { grid-template-columns: 5fr 7fr; }
  .split--7-5 { grid-template-columns: 7fr 5fr; }
  .split--1-1 { grid-template-columns: 1fr 1fr; }
  .split--reverse > :first-child { order: 2; }
}
.stack > * + * { margin-top: 20px; }
.mt-lg { margin-top: clamp(32px, 4vw, 56px); }
.mt-md { margin-top: 24px; }
.center { text-align: center; }
.measure { max-width: 68ch; }

/* Print: the pricing page and the security page get printed and taken into
   meetings. Drop the furniture and keep the substance. */
@media print {
  .site-head, .announce, .mobile-nav, .site-foot, .final-cta, .btn { display: none !important; }
  body { font-size: 12pt; color: #000; }
  .sec { padding-block: 12pt; }
  .sec--ink, .sec--exchange { background: #fff !important; color: #000 !important; }
  .sec--ink *, .sec--exchange * { color: #000 !important; }
}

/* A list of labels rather than a list of points — used where each item is a
   name with nothing to explain, such as the migration data categories. */
.chips--lg { gap: 9px; }
.chip--lg {
  font-size: 15px; padding: 8px 16px; background: #fff;
  border: 1.5px solid var(--line); color: var(--ink); font-weight: 600;
}

/* A full-width photographic band. Used where the image is inherently
   horizontal and would be ruined by a portrait crop beside a column. */
.band { margin: 0; }
.band img { width: 100%; border-radius: var(--r-card); }
.band figcaption { margin: 12px 2px 0; font-size: 14px; color: var(--ink-2); }

/* ------------------------------------------------------- legal documents */
/* A long legal document is read differently from a marketing page: in
   fragments, by someone looking for one clause. Numbered blocks with breathing
   room between them make a clause findable and quotable. */
.legal { max-width: 72ch; }
.legal__block { margin: 0 0 40px; }
.legal__block h2 {
  font-size: clamp(20px, 2.4vw, 24px); margin: 0 0 14px;
  padding-top: 20px; border-top: 1px solid var(--line-2);
}
.legal__block:first-child h2 { padding-top: 0; border-top: none; }
.legal__block p { margin: 0 0 14px; }
.legal__block ul, .legal__block ol { margin: 0 0 16px; padding-left: 24px; display: grid; gap: 8px; }
.legal__block ul { list-style: disc; }
.legal__block ol { list-style: decimal; }

/* A fact only the owner or counsel can supply. Deliberately loud: this must be
   impossible to read past and impossible to publish by accident. */
.confirm {
  display: block; background: var(--orange-soft); color: var(--orange-800);
  border-left: 4px solid var(--orange-800); border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: 12px 16px; margin: 4px 0 14px; font-size: 16px;
}
.confirm span {
  display: block; font-family: Epilogue, sans-serif; font-weight: 700; font-size: 11.5px;
  letter-spacing: .09em; text-transform: uppercase; margin-bottom: 4px;
}

/* Why a clause is worded the way it is. For the reviewer, not the reader — it
   goes when the document is approved. */
.drafting-note {
  background: var(--blush); border-left: 3px solid var(--pink-600);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 12px 16px; margin: 0 0 16px;
  font-size: 15px; color: var(--ink-2);
}
.drafting-note b {
  color: var(--pink-700); font-family: Epilogue, sans-serif; font-size: 11.5px;
  letter-spacing: .09em; text-transform: uppercase; display: block; margin-bottom: 4px;
}

.review-list { list-style: decimal; padding-left: 24px; display: grid; gap: 16px; margin: 0 0 20px; }
.review-list li b { display: block; color: var(--ink); font-size: 17px; }
.review-list li span { display: block; color: var(--ink-2); font-size: 15.5px; margin-top: 4px; }
.review-list__foot { font-size: 15px; color: var(--ink-2); }

/* ------------------------------------------------------------ customer proof */
/* Unpopulated today. The styles exist so the first real case study does not
   arrive alongside a design decision made in a hurry. */
.quotes, .studies { list-style: none; display: grid; gap: 18px; }
.quote { margin: 0; }
.quote blockquote { margin: 0; font-size: 18px; line-height: 1.55; }
.quote blockquote p::before { content: '\\201C'; }
.quote blockquote p::after { content: '\\201D'; }
.quote figcaption {
  margin-top: 14px; font-family: Epilogue, sans-serif; font-weight: 700; font-size: 15px;
}
.quote figcaption span { display: block; font-weight: 400; font-size: 14px; color: var(--ink-2); }
.quote--in-study { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-2); }
.study__problem, .study__change { font-size: 15.5px; }
.study__problem b, .study__change b {
  display: block; font-family: Epilogue, sans-serif; font-size: 11.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px;
}
.study__results { list-style: none; display: grid; gap: 14px; margin: 18px 0 0; }
.study__value { font-family: Epilogue, sans-serif; font-weight: 800; font-size: 26px; color: var(--navy); }
.study__label { display: block; font-weight: 700; font-size: 14.5px; }
/* The method and the period are not a footnote: a result without them is the
   kind of claim the brief forbids, so they are rendered at the same weight as
   the label rather than shrunk into a caption. */
.study__method { display: block; font-size: 13.5px; color: var(--ink-2); }

/* The sign-in row. Existing customers arrive at this site too, and the header
   Log in is easy to miss once someone has scrolled a whole page. Paired with
   the way to get access, because there is no self-serve signup — access comes
   through the founding programme, and a "create account" button that led to an
   enquiry form would be a lie about what happens next. */
.site-foot__signin {
  max-width: var(--wrap); margin: 44px auto 0; padding-inline: var(--pad-x);
}
.site-foot__signin-in {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 24px;
  padding: 20px 24px; border-radius: var(--r-card);
  /* Opaque rather than a translucent white over the footer ground. It is the
     same colour either way, but a solid value is one a contrast check can read
     directly — translucency over an assumed ground is how a panel ends up
     unverifiable, and eventually wrong. */
  background: #262758; border: 1px solid rgba(255, 255, 255, .16);
}
.site-foot__signin p { margin: 0; font-size: 15.5px; color: rgba(255, 255, 255, .78); }
.site-foot__signin b { color: #fff; font-family: Epilogue, sans-serif; }
.site-foot__signin-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------------------------------------------------------- audience choice
   Three doors, in the open rather than in front of the content. The row reads
   as a question and answers, so it is a nav with a visible label rather than a
   set of buttons a screen reader meets without context. */
.audience { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line-2); }
.audience__q {
  font-family: Epilogue, sans-serif; font-weight: 700; font-size: 12.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 12px;
}
.audience__list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.audience__item {
  display: inline-block; padding: 9px 15px; border-radius: 999px;
  border: 1.5px solid var(--line); background: #fff; color: var(--ink);
  font-weight: 700; font-size: 14.5px; text-decoration: none; line-height: 1.2;
  transition: border-color .15s, background-color .15s;
}
a.audience__item:hover, a.audience__item:focus-visible { border-color: var(--pink-600); background: var(--pink-soft); }
/* The page you are already on is stated, not offered. */
.audience__item--here { background: var(--ink); border-color: var(--ink); color: #fff; cursor: default; }
.sec--ink .audience, .sec--exchange .audience { border-top-color: rgba(255,255,255,.22); }
.sec--ink .audience__q, .sec--exchange .audience__q { color: rgba(255,255,255,.72); }
.sec--ink a.audience__item:not(.btn), .sec--exchange a.audience__item:not(.btn) {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); color: #fff;
}
@media (max-width: 520px) { .audience__item { font-size: 14px; padding: 8px 13px; } }