/* ==========================================================================
   Dash - godash.nz
   --------------------------------------------------------------------------
   Design system notes
   - The page deliberately commits to a single visual world: a dusty "docket"
     paper ground alternating with a deep petrol ground. Sections alternate to
     mark chapters, so an inverted dark theme would break the structural
     device. This is a choice, not an omission.
   - Volt is only ever used on the petrol ground (it has no contrast on paper).
     Rust and moss are semantic (money / done) and are never used as accents.
   - Type: system grotesque for display + body, monospace for operational data
     (job numbers, times, dollars) - the vernacular of dockets, and correct for
     tabular figures.
   ========================================================================== */

:root {
  /* ground + ink */
  --paper: #f1f0ea;
  --paper-2: #e7e5dc;
  --paper-3: #dcd9cd;
  --ink: #14171a;
  --ink-2: #3f4744;
  --ink-3: #5e6864;

  /* dark ground */
  --petrol: #0a2b28;
  --petrol-2: #0f3a35;
  --petrol-3: #174a43;
  --on-petrol: #eef1ea;
  --on-petrol-2: #a9bab2;

  /* accent + semantics */
  --volt: #d8e14b;
  --rust: #a8380b;
  --moss: #206b4b;

  /* focus ring colour for the current ground; overridden on dark chapters */
  --focus: var(--rust);

  /* type */
  --sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI",
    system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:
    ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Roboto Mono",
    Menlo, Consolas, monospace;

  --t-display: clamp(3.4rem, 8.4vw, 6.75rem);
  --t-h2: clamp(2.4rem, 5.4vw, 4.25rem);
  --t-h3: clamp(1.45rem, 2.3vw, 1.95rem);
  --t-lead: clamp(1.0625rem, 1.45vw, 1.3125rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-micro: 0.8125rem;

  /* form */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 100px;

  --shell: 1240px;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  --ease: cubic-bezier(0.2, 0.7, 0.25, 1);
}

/* --------------------------------------------------------------- base ---- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Clear the sticky masthead when jumping to an in-page anchor. */
[id] {
  scroll-margin-top: 5.5rem;
}

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

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

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}

p {
  margin: 0;
}

ul,
ol,
dl {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* The focus ring has to clear 3:1 against whichever ground it lands on.
   Rust manages that on paper (5.68:1) but not on petrol (2.33:1), so the
   dark chapters inherit a volt ring instead (10.65:1). */
.ai,
.replaces,
.straight,
.close,
.foot,
.plan-featured,
.float-card {
  --focus: var(--volt);
}

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

.skip {
  position: fixed;
  z-index: 200;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.7rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--r-sm);
  transform: translateY(-160%);
  transition: transform 0.18s var(--ease);
}

.skip:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------- primitives ---- */

.eyebrow {
  margin: 0 0 1.4rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
}

.eyebrow-volt {
  color: var(--volt);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.75rem;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  font-family: inherit;
  font-size: var(--t-body);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.18s var(--ease),
    transform 0.18s var(--ease);
}

.btn:hover {
  background: var(--petrol);
  transform: translateY(-2px);
}

.btn-sm {
  min-height: 2.75rem;
  padding: 0 1.15rem;
  font-size: var(--t-small);
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn-volt {
  background: var(--volt);
  color: var(--petrol);
}

.btn-volt:hover {
  background: #e6ee6e;
}

.ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  font-weight: 600;
  text-decoration: none;
  text-underline-offset: 0.3em;
  color: var(--ink);
}

.ghost:hover {
  text-decoration: underline;
}

.ghost svg {
  transition: transform 0.18s var(--ease);
}

.ghost:hover svg {
  transform: translateX(4px);
}

.ghost-light {
  color: var(--on-petrol);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
  margin-top: 2.25rem;
}

.actions-center {
  justify-content: center;
}

.fineprint {
  margin-top: 1.25rem;
  font-size: var(--t-micro);
  color: var(--ink-3);
}

.fineprint-light {
  color: var(--on-petrol-2);
}

.section-head {
  max-width: 42rem;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.section-head h2 {
  font-size: var(--t-h2);
}

.section-head-center {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

.section-lead {
  max-width: 34rem;
  margin-top: 1.5rem;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-2);
}

.section-head-center .section-lead {
  margin-inline: auto;
}

/* ----------------------------------------------------------- masthead ---- */

.masthead {
  position: sticky;
  z-index: 100;
  top: 0;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease);
}

.masthead.is-stuck {
  border-bottom-color: var(--paper-3);
}

.masthead-in {
  display: flex;
  align-items: center;
  gap: 2rem;
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0.9rem var(--gutter);
}

.mark {
  flex: none;
  color: var(--ink);
}

.mark img {
  width: 104px;
  height: auto;
}

.mainnav {
  display: flex;
  gap: 1.75rem;
  margin-right: auto;
  font-size: var(--t-small);
  font-weight: 500;
}

.mainnav a {
  padding: 0.5rem 0;
  color: var(--ink-2);
  text-decoration: none;
}

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

.masthead-cta {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.nav-signin {
  display: none;
}

.signin {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.5rem 0;
}

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

.burger {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--paper-3);
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
}

.burger span {
  display: block;
  width: 1.05rem;
  height: 2px;
  margin: 0.22rem auto;
  background: var(--ink);
  transition: transform 0.2s var(--ease);
}

.burger[aria-expanded="true"] span:first-child {
  transform: translateY(4px) rotate(45deg);
}

.burger[aria-expanded="true"] span:last-child {
  transform: translateY(-4px) rotate(-45deg);
}

/* --------------------------------------------------------------- hero ---- */

.hero {
  padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(4rem, 8vw, 7rem);
  overflow: hidden;
  background:
    radial-gradient(
      120% 90% at 88% 8%,
      rgb(216 225 75 / 22%) 0%,
      transparent 55%
    ),
    linear-gradient(180deg, #f5f4ef 0%, var(--paper) 60%);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero h1 {
  font-size: var(--t-display);
  letter-spacing: -0.045em;
  line-height: 0.92;
}

.hero h1 em {
  font-style: normal;
  color: var(--rust);
}

.hero .lead {
  max-width: 30rem;
  margin-top: 1.75rem;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-2);
}

/* ---- the board ---- */

.board-wrap {
  margin: 0;
}

/* The floating field card is anchored to the board itself, not to the figure
   - otherwise `bottom` resolves against the caption too and covers it. */
.board-stack {
  position: relative;
}

.board {
  border: 1px solid var(--paper-3);
  border-radius: var(--r-md);
  background: #fbfaf6;
  box-shadow:
    0 1px 0 #fff inset,
    0 24px 60px -30px rgb(10 43 40 / 45%);
  overflow: hidden;
}

.board-chrome {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--paper-2);
  background: #f4f2ec;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--paper-3);
}

.board-title {
  margin-left: 0.6rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--ink-2);
}

.board-title span {
  color: var(--ink-3);
}

.board-live {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--moss);
}

.board-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--moss);
}

.board-body {
  padding: 1rem 1rem 0.5rem;
}

.board-head {
  display: grid;
  grid-template-columns: 2.1rem repeat(3, 1fr);
  gap: 0.5rem;
  padding-bottom: 0.6rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
}

.board-grid {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  gap: 0.5rem;
}

.rail {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-3);
}

.rail span {
  border-top: 1px solid var(--paper-2);
  padding-top: 0.15rem;
}

.lanes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.lane {
  display: grid;
  grid-template-rows: repeat(6, minmax(2.4rem, 1fr));
  gap: 0;
  background-image: linear-gradient(var(--paper-2) 1px, transparent 1px);
  background-size: 100% calc((100% - 1px) / 6);
}

.chip {
  grid-row: calc(var(--s) + 1) / calc(var(--e) + 1);
  margin: 2px 0;
  padding: 0.5rem 0.55rem;
  border-left: 3px solid;
  border-radius: var(--r-xs);
  overflow: hidden;
}

.chip b {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
}

.chip span {
  display: block;
  margin-top: 0.1rem;
  font-size: var(--t-micro);
  line-height: 1.25;
  opacity: 0.85;
}

.chip i {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-style: normal;
  opacity: 0.7;
}

/* Slot placement lives here rather than in a style attribute: the CSP is
   `style-src 'self'`, which blocks inline style attributes outright. */
.chip-a {
  --s: 0;
  --e: 3;
}

.chip-b {
  --s: 4;
  --e: 6;
}

.chip-c {
  --s: 1;
  --e: 4;
}

.chip-d {
  --s: 0;
  --e: 2;
}

.chip-e {
  --s: 3;
  --e: 6;
}

.chip-a,
.chip-c {
  background: #e3ece4;
  border-color: var(--moss);
  color: #14352a;
}

.chip-b,
.chip-e {
  background: #eceedb;
  border-color: #9aa62e;
  color: #33380c;
}

.chip-d {
  background: #f4e4dc;
  border-color: var(--rust);
  color: #4a1c08;
}

.board-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  padding: 0.85rem 1.15rem;
  padding-right: 15rem;
  border-top: 1px solid var(--paper-2);
  background: #f4f2ec;
  font-size: var(--t-micro);
  color: var(--ink-3);
}

.board-foot b {
  font-family: var(--mono);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.float-card {
  position: absolute;
  right: -1.25rem;
  bottom: -2rem;
  width: 15rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--petrol-3);
  border-radius: var(--r-md);
  background: var(--petrol);
  color: var(--on-petrol);
  box-shadow: 0 24px 50px -24px rgb(10 43 40 / 70%);
}

.fc-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--on-petrol-2);
}

.fc-top i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--volt);
}

.fc-top b {
  color: var(--volt);
  font-variant-numeric: tabular-nums;
}

.fc-job {
  margin-top: 0.35rem;
  font-size: var(--t-small);
  font-weight: 600;
}

.float-card ul {
  display: grid;
  gap: 0.3rem;
  margin-top: 0.6rem;
  font-size: var(--t-micro);
  color: var(--on-petrol-2);
}

.float-card li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.tick {
  flex: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--volt);
  box-shadow: inset 0 0 0 2px var(--petrol);
  border: 1px solid var(--volt);
}

.tick-open {
  background: transparent;
  border-color: currentColor;
  box-shadow: none;
  opacity: 0.6;
}

.board-note {
  max-width: 24rem;
  margin-top: 3rem;
  font-size: var(--t-micro);
  color: var(--ink-3);
}

/* --------------------------------------------------------------- shots ---- */

/* Real product captures. Framed rather than bled, so a light app UI reads as
   a deliberate object on both the paper and petrol grounds. */

.shot img {
  display: block;
  width: 100%;
  height: auto;
}

.shot-board {
  border: 1px solid var(--paper-3);
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 1px 0 #fff inset,
    0 26px 60px -32px rgb(10 43 40 / 55%);
}

.shot-phone {
  position: absolute;
  right: 0;
  bottom: -2.25rem;
  width: 178px;
  border: 6px solid #05201d;
  border-radius: 1.6rem;
  overflow: hidden;
  background: #05201d;
  box-shadow: 0 26px 50px -22px rgb(10 43 40 / 70%);
}

/* The board bleeds past the right gutter so a dense dashboard stays legible;
   .hero's overflow clips it. The phone must then be pulled back in by the same
   overhang, or the clip slices it too. Overhang = (container right) - viewport,
   which resolves to shell/2 - 35vw - gutter for a centred shell. */
@media (min-width: 1081px) {
  .board-wrap {
    width: calc(100% + 15vw);
  }

  .shot-phone {
    right: max(0px, calc(var(--shell) / 2 - 35vw - var(--gutter) + 1.5rem));
  }
}

/* inside the day chapter (petrol ground) */
.shot-tall {
  width: min(280px, 78%);
  justify-self: center;
  margin: 0;
  border: 7px solid #05201d;
  border-radius: 1.85rem;
  overflow: hidden;
  background: #05201d;
  box-shadow: 0 30px 60px -28px rgb(0 0 0 / 80%);
}

.shot-wide {
  margin: 0;
  border: 1px solid var(--petrol-3);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--petrol-2);
  box-shadow: 0 26px 55px -30px rgb(0 0 0 / 75%);
}

/* ------------------------------------------------------------- cycler ---- */
/* One line that flashes through what Dash actually does. The rotating word is
   inline-block with a min-width measured in JS from the longest option, so the
   full stop after it never slides about. Screen readers get the whole list
   once, in the flow of the sentence, instead of a word mutating underneath
   them. */

.doesband {
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
  background: var(--paper-2);
  border-block: 1px solid var(--paper-3);
}

.db-in {
  max-width: var(--shell);
  margin-inline: auto;
}

.db-line {
  font-size: clamp(1.9rem, 5vw, 3.75rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.db-sub {
  margin-top: 1rem;
  font-size: var(--t-lead);
  color: var(--ink-2);
}

.cycle {
  display: inline-block;
  position: relative;
  color: var(--rust);
  text-align: left;
  vertical-align: bottom;
}

.cycle-word {
  display: inline-block;
  transition:
    opacity 0.28s var(--ease),
    transform 0.28s var(--ease);
}

.cycle-word.is-out {
  opacity: 0;
  transform: translateY(-0.22em);
}


/* ----------------------------------------------------------- replaces ---- */
/* Marquee of what Dash takes off the wall. site.js clones the set until it is
   wider than two viewports, so translating by exactly -50% lands on an
   identical frame and the loop never shows a gap or a jump. */

.replaces {
  padding: 2.5rem 0;
  overflow: hidden;
  background: var(--petrol);
  color: var(--on-petrol);
}

.replaces-label {
  max-width: var(--shell);
  margin: 0 auto 1rem;
  padding-inline: var(--gutter);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--volt);
}

.tickerwrap {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ticker {
  display: flex;
  width: max-content;
}

.tick-set {
  flex: none;
  font-size: clamp(1.35rem, 3.2vw, 2.4rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--on-petrol);
}

.tick-set i {
  padding: 0 0.6rem;
  color: var(--volt);
  font-style: normal;
}

.ticker.is-rolling {
  animation: roll 42s linear infinite;
}

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

/* ------------------------------------------------------------ chapters ---- */
/* The hero composition repeated: mono eyebrow, big left type, and a desktop
   screen with the phone laid over its corner. Sides alternate so the page has
   a rhythm rather than five identical rows. */

.chapter {
  padding: clamp(4rem, 8vw, 6.5rem) 0;
  overflow: hidden;
  background: var(--paper);
}

.chapter.ch-alt {
  background:
    radial-gradient(
      100% 80% at 88% 12%,
      rgb(216 225 75 / 20%) 0%,
      transparent 60%
    ),
    var(--paper-2);
  border-block: 1px solid var(--paper-3);
}

.ch-in {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.ch-left .ch-in {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
}

.ch-left .ch-copy {
  order: 2;
}

.ch-left .ch-visual {
  order: 1;
}

.ch-copy {
  max-width: 31rem;
}

.ch-copy h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.ch-copy h2 em {
  font-style: normal;
  color: var(--rust);
}

.ch-lead {
  margin-top: 1.35rem;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-2);
}

.ch-list {
  display: grid;
  gap: 0.55rem;
  margin-top: 1.6rem;
  font-size: var(--t-small);
  color: var(--ink-2);
}

.ch-list li {
  position: relative;
  padding-left: 1.35rem;
}

.ch-list li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--moss);
}

/* ---- the paired screens ---- */

.ch-visual {
  min-width: 0;
}

.ch-stack {
  position: relative;
}

.ch-desk {
  overflow: hidden;
  border: 1px solid var(--paper-3);
  border-radius: 12px;
  background: #fff;
  box-shadow:
    0 1px 0 #fff inset,
    0 28px 64px -34px rgb(10 43 40 / 45%);
}

.ch-desk img,
.ch-phone img {
  display: block;
  width: 100%;
  height: auto;
}

.ch-phone {
  position: absolute;
  right: -1rem;
  bottom: -2rem;
  width: 172px;
  overflow: hidden;
  border: 6px solid #101a19;
  border-radius: 1.5rem;
  background: #101a19;
  box-shadow: 0 24px 50px -22px rgb(10 43 40 / 60%);
}

/* mirrored chapters put the phone on the outer edge too */
.ch-left .ch-phone {
  right: auto;
  left: -1rem;
}

/* the desktop bleeds past the gutter, exactly like the hero board */
@media (min-width: 1081px) {
  .ch-right .ch-desk {
    width: calc(100% + 15vw);
  }

  /* Bleeding right loses the far edge of a table, which costs nothing.
     Bleeding left would cut the row labels, so the mirrored side only runs
     out to the viewport edge. */
  .ch-left .ch-desk {
    /* run out to the viewport edge, never past it: min() picks the shell
       offset once the viewport is wider than the shell, and the plain gutter
       below that. width:auto lets the block stretch to the column's right. */
    width: auto;
    margin-left: min(
      calc(-1 * var(--gutter)),
      calc(var(--shell) / 2 - 50vw - var(--gutter))
    );
  }

  /* keep the phone inside the viewport once the desk has bled past it */
  .ch-right .ch-phone {
    right: max(0px, calc(var(--shell) / 2 - 35vw - var(--gutter) + 1.5rem));
  }

  .ch-left .ch-phone {
    left: -1.5rem;
  }
}

/* --------------------------------------------------------------- does ---- */
/* An editorial index rather than a grid of bulleted boxes: the capability
   count is the point, so the rows read as a run of type with hairline rules
   instead of a wall of dots. */

.does {
  padding: clamp(4.5rem, 9vw, 8rem) var(--gutter);
}

.does .section-head,
.fstats,
.frows,
.reports-strip,
.integrations {
  max-width: var(--shell);
  margin-inline: auto;
}

.fstats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 2px solid var(--ink);
}

.fstats p {
  display: grid;
  gap: 0.25rem;
}

.fstats b {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}

.fstats span {
  font-size: var(--t-small);
  color: var(--ink-2);
}

.frows {
  display: grid;
}

.frow {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 12rem) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 2.6vw, 2.1rem) 0;
  border-bottom: 1px solid var(--paper-3);
}

.frow-index {
  font-family: var(--mono);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--rust);
  font-variant-numeric: tabular-nums;
}

.frow-name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  letter-spacing: -0.025em;
}

.fg-tag {
  padding: 0.2rem 0.55rem;
  border-radius: var(--r-pill);
  background: var(--petrol);
  color: var(--volt);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.frow-caps {
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--ink-2);
  text-wrap: pretty;
}

.frow-caps i {
  padding: 0 0.55rem;
  color: var(--rust);
  font-style: normal;
}

.reports-strip {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--r-md);
  background: var(--petrol);
  color: var(--on-petrol);
}

.rs-label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--volt);
}

.rs-lead {
  max-width: 46rem;
  margin-top: 0.9rem;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--on-petrol);
}

.integrations {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.int-label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
}

.int-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.int-list li {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  padding: 1.4rem;
  border: 1px solid var(--paper-3);
  border-radius: var(--r-md);
  background: var(--paper);
}

.int-list img {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  object-fit: contain;
}

.int-list span:last-child {
  font-size: var(--t-small);
  line-height: 1.55;
  color: var(--ink-2);
}

.int-list b {
  display: block;
  margin-bottom: 0.3rem;
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--ink);
}

/* ----------------------------------------------------------------- nz ---- */

.nz {
  padding: clamp(4.5rem, 9vw, 8rem) var(--gutter);
  background: var(--paper);
}

.nz-in {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  max-width: var(--shell);
  margin-inline: auto;
}

.nz .section-head {
  margin-bottom: 0;
}

.nzlist {
  display: grid;
  gap: 1.75rem;
}

.nzlist div {
  padding-top: 1.5rem;
  border-top: 1px solid var(--paper-3);
}

.nzlist dt {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--rust);
}

.nzlist dd {
  margin: 0.5rem 0 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-2);
}

/* -------------------------------------------------------------- trust ---- */

.trust {
  padding: clamp(3.5rem, 7vw, 6rem) var(--gutter);
  background: var(--paper-2);
  border-block: 1px solid var(--paper-3);
}

.trust-in {
  max-width: var(--shell);
  margin-inline: auto;
}

.trust-h {
  max-width: 30rem;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
}

.trustlist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.trustlist li {
  padding-top: 1.25rem;
  border-top: 2px solid var(--ink);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-2);
}

.trustlist b {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--ink);
}

/* ------------------------------------------------------------ pricing ---- */

.pricing {
  padding: clamp(4.5rem, 9vw, 8rem) var(--gutter);
}

.billing {
  display: flex;
  gap: 0.25rem;
  width: fit-content;
  margin: 0 auto 3rem;
  padding: 0.25rem;
  border: 1px solid var(--paper-3);
  border-radius: var(--r-pill);
  background: var(--paper-2);
}

.billing button {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0 1.15rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-2);
  font-family: inherit;
  font-size: var(--t-small);
  font-weight: 600;
  cursor: pointer;
}

.billing button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.billing span {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--moss);
}

.billing button[aria-pressed="true"] span {
  color: var(--volt);
}

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  gap: 1.25rem;
  max-width: var(--shell);
  margin-inline: auto;
  align-items: start;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: clamp(1.75rem, 2.6vw, 2.25rem);
  border: 1px solid var(--paper-3);
  border-radius: var(--r-md);
  background: #f7f6f1;
}

.plan-featured {
  border-color: var(--petrol);
  background: var(--petrol);
  color: var(--on-petrol);
}

.badge {
  align-self: flex-start;
  margin-bottom: 0.9rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--volt);
  color: var(--petrol);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.plan h3 {
  font-size: 1.6rem;
}

.plan-for {
  margin-top: 0.6rem;
  min-height: 3.2rem;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-2);
}

.plan-featured .plan-for {
  color: var(--on-petrol-2);
}

.price {
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
  margin-top: 1.25rem;
}

.cur {
  align-self: flex-start;
  margin-top: 0.65rem;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ink-2);
}

.plan-featured .cur {
  color: var(--on-petrol-2);
}

.price b {
  font-size: clamp(3.25rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.per {
  margin-left: 0.5rem;
  font-size: var(--t-small);
  color: var(--ink-2);
}

.plan-featured .per {
  color: var(--on-petrol-2);
}

.plan-note {
  min-height: 2.6rem;
  margin-top: 0.6rem;
  font-size: var(--t-small);
  color: var(--ink-2);
}

.plan-featured .plan-note {
  color: var(--on-petrol-2);
}

.plan-featured .btn {
  background: var(--volt);
  color: var(--petrol);
}

.plan-featured .btn:hover {
  background: #e6ee6e;
}

.plan-list {
  display: grid;
  gap: 0.65rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--paper-3);
  font-size: var(--t-small);
  color: var(--ink-2);
}

.plan-featured .plan-list {
  border-top-color: var(--petrol-3);
  color: var(--on-petrol-2);
}

.plan-list li {
  position: relative;
  padding-left: 1.4rem;
}

.plan-list li::before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--moss);
}

.plan-featured .plan-list li::before {
  background: var(--volt);
}

.plan-list .plus {
  font-weight: 600;
  color: var(--ink);
}

.plan-featured .plan-list .plus {
  color: var(--on-petrol);
}

.plans-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.plans-4 .plan {
  padding: clamp(1.5rem, 2.2vw, 1.9rem);
}

.plans-4 .plan h3 {
  font-size: 1.4rem;
}

.plans-4 .price b {
  font-size: clamp(2.6rem, 4vw, 3.25rem);
}

.plans-4 .plan-for {
  min-height: 4rem;
}

/* Every plan carries every feature, so the list belongs to the section rather
   than repeating identically in four cards. */
.included {
  max-width: var(--shell);
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border: 1px solid var(--paper-3);
  border-radius: var(--r-md);
  background: var(--paper-2);
}

.inc-label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rust);
}

.inc-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.6rem clamp(1.25rem, 2.5vw, 2rem);
  margin-top: 1.25rem;
  font-size: var(--t-small);
  color: var(--ink-2);
}

.inc-list li {
  position: relative;
  padding-left: 1.35rem;
}

.inc-list li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--moss);
}

.inc-note {
  max-width: 44rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--paper-3);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-2);
}

.pricing-foot {
  max-width: 40rem;
  margin: 2.5rem auto 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-2);
  text-align: center;
}

/* ------------------------------------------------- pricing additions ---- */

.intro-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 0.85rem;
  max-width: 46rem;
  margin: 0 auto 2.25rem;
  padding: 0.85rem 1.25rem;
  border: 1px solid var(--paper-3);
  border-radius: var(--r-md);
  background: var(--paper-2);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-2);
  text-align: center;
}

.intro-banner span {
  padding: 0.25rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--petrol);
  color: var(--volt);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.from {
  align-self: flex-start;
  margin-top: 0.85rem;
  margin-right: 0.35rem;
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink-2);
}

.plan-featured .from {
  color: var(--on-petrol-2);
}

.addon {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--paper-3);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-2);
  text-align: center;
}

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

.plan-featured .addon {
  border-top-color: var(--petrol-3);
  color: var(--on-petrol-2);
}

.plan-featured .addon b {
  color: var(--volt);
}

.credits {
  margin-bottom: 1.5rem;
  padding: 0.6rem 0.8rem;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  font-size: var(--t-small);
  color: var(--ink-2);
}

.credits b {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--ink);
}

.plan-featured .credits {
  background: rgb(216 225 75 / 12%);
  color: var(--on-petrol-2);
}

.plan-featured .credits b {
  color: var(--volt);
}

.enterprise {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  max-width: var(--shell);
  margin: 1.25rem auto 0;
  padding: clamp(1.5rem, 2.6vw, 2.25rem);
  border: 1px solid var(--paper-3);
  border-radius: var(--r-md);
  background: var(--paper-2);
}

.enterprise h3 {
  font-size: 1.4rem;
}

.enterprise p {
  max-width: 42rem;
  margin-top: 0.5rem;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--ink-2);
}

.enterprise .btn {
  flex: none;
}

/* ----------------------------------------------------------------- ai ---- */

.ai {
  padding: clamp(4.5rem, 9vw, 8rem) var(--gutter);
  background: var(--petrol);
  color: var(--on-petrol);
}

.ai-in {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  max-width: var(--shell);
  margin-inline: auto;
}

.ai .section-head {
  margin-bottom: 0;
}

.ai h2 em {
  font-style: normal;
  color: var(--volt);
}

.ai .section-lead {
  color: var(--on-petrol-2);
}

.ai-list {
  display: grid;
  gap: 1px;
  overflow: hidden;
  background: var(--petrol-3);
  border: 1px solid var(--petrol-3);
  border-radius: var(--r-md);
  counter-reset: ai;
}

.ai-list li {
  padding: 1.4rem clamp(1.25rem, 2.2vw, 1.75rem);
  background: var(--petrol);
  counter-increment: ai;
}

.ai-list h3 {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.ai-list h3::before {
  content: counter(ai, decimal-leading-zero);
  flex: none;
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  color: var(--volt);
}

.ai-list p {
  margin-top: 0.45rem;
  padding-left: 2.05rem;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--on-petrol-2);
}

/* ------------------------------------------------------------ payroll ---- */

.payroll {
  padding: clamp(4.5rem, 9vw, 7rem) var(--gutter);
  background: var(--paper-2);
  border-block: 1px solid var(--paper-3);
}

.payroll-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: var(--shell);
  margin-inline: auto;
}

.payroll-copy h2 {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.payroll-copy h2 em {
  font-style: normal;
  color: var(--rust);
}

.payroll-copy .section-lead {
  max-width: 30rem;
}

.payroll-list {
  display: grid;
  gap: 0.6rem;
  margin-top: 1.75rem;
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--ink-2);
}

.payroll-list li {
  position: relative;
  padding-left: 1.4rem;
}

.payroll-list li::before {
  content: "";
  position: absolute;
  top: 0.52em;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--moss);
}

.payroll-shot .shot-frame {
  overflow: hidden;
  border: 1px solid var(--paper-3);
  border-radius: 12px;
  background: #fff;
  box-shadow:
    0 1px 0 #fff inset,
    0 26px 60px -32px rgb(10 43 40 / 45%);
}

.payroll-shot .shot-frame img {
  display: block;
  width: 100%;
  height: auto;
}

.payroll-note {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
}

/* ----------------------------------------------------------- straight ---- */

.straight {
  padding: clamp(4.5rem, 9vw, 7rem) var(--gutter);
  background: var(--petrol);
  color: var(--on-petrol);
}

.straight-in {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 4rem);
  max-width: var(--shell);
  margin-inline: auto;
}

.straight h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.straight-list {
  display: grid;
  gap: 0;
}

.straight-list li {
  padding: 1.2rem 0;
  border-top: 1px solid var(--petrol-3);
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--on-petrol-2);
}

.straight-list li:last-child {
  border-bottom: 1px solid var(--petrol-3);
}

.straight-list b {
  display: block;
  margin-bottom: 0.25rem;
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--volt);
}

/* ---------------------------------------------------------------- faq ---- */

.faq {
  padding: clamp(4.5rem, 9vw, 8rem) var(--gutter) clamp(5rem, 10vw, 9rem);
  background: var(--paper-2);
}

.faq .section-head,
.faqlist {
  max-width: var(--shell);
  margin-inline: auto;
}

.faqlist {
  border-top: 1px solid var(--paper-3);
}

.faqlist details {
  border-bottom: 1px solid var(--paper-3);
}

.faqlist summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.5rem 0;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
}

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

.faqlist summary::after {
  content: "";
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  border-right: 2px solid var(--rust);
  border-bottom: 2px solid var(--rust);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.22s var(--ease);
}

.faqlist details[open] summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.faqlist p {
  max-width: 44rem;
  padding-bottom: 1.75rem;
  color: var(--ink-2);
  line-height: 1.65;
}

/* -------------------------------------------------------------- close ---- */

.close {
  padding: clamp(5rem, 11vw, 9rem) var(--gutter);
  background:
    radial-gradient(
      90% 120% at 50% 0%,
      var(--petrol-2) 0%,
      var(--petrol) 60%
    );
  color: var(--on-petrol);
  text-align: center;
}

.close-in {
  max-width: 44rem;
  margin-inline: auto;
}

.close-full {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
}

.close h2 {
  font-size: var(--t-h2);
}

.close-lead {
  margin-top: 1.5rem;
  font-size: var(--t-lead);
  color: var(--on-petrol-2);
}

/* --------------------------------------------------------------- foot ---- */

.foot {
  padding: clamp(3rem, 6vw, 4.5rem) var(--gutter) 2rem;
  background: #061c1a;
  color: var(--on-petrol);
}

.foot-in {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
  max-width: var(--shell);
  margin-inline: auto;
}

.foot-logo {
  display: block;
  width: 110px;
  height: auto;
  color: var(--on-petrol);
}

.foot-brand p {
  max-width: 20rem;
  margin-top: 1rem;
  font-size: var(--t-small);
  color: var(--on-petrol-2);
}

.foot-nav {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  font-size: var(--t-small);
}

.foot-nav h2 {
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--on-petrol-2);
}

.foot-nav a {
  color: var(--on-petrol);
  text-decoration: none;
}

.foot-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.foot-legal {
  max-width: var(--shell);
  margin: 3rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--petrol-2);
  font-size: var(--t-micro);
  color: var(--on-petrol-2);
}


/* -------------------------------------------------------------- legal ---- */
/* Long-form documents: a single measured column, generous leading, and enough
   hierarchy that someone can find clause 8 without reading clauses 1 to 7. */

.legal {
  padding: clamp(3.5rem, 7vw, 6rem) var(--gutter) clamp(4rem, 8vw, 6rem);
  background: var(--paper);
}

.legal-in {
  max-width: 46rem;
  margin-inline: auto;
}

.legal h1 {
  font-size: clamp(2.4rem, 5vw, 3.5rem);
  letter-spacing: -0.04em;
}

.legal-lead {
  margin-top: 1.25rem;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-2);
}

.legal-meta {
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: var(--t-micro);
  color: var(--ink-3);
}



.legal h2 {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--paper-3);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  letter-spacing: -0.02em;
}

.legal p,
.legal-ul li,
.legal-dl dd {
  margin-top: 1rem;
  font-size: var(--t-body);
  line-height: 1.7;
  color: var(--ink-2);
}

.legal p b,
.legal-ul b,
.legal-dl b {
  color: var(--ink);
}

.legal-ul {
  margin-top: 0.5rem;
}

.legal-ul li {
  position: relative;
  padding-left: 1.4rem;
}

.legal-ul li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--moss);
}

.legal-dl {
  margin-top: 1rem;
  display: grid;
  gap: 1.25rem;
}

.legal-dl dt {
  font-size: var(--t-body);
  font-weight: 600;
  color: var(--ink);
}

.legal-dl dd {
  margin: 0.35rem 0 0;
}

.legal-table-wrap {
  margin-top: 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--paper-3);
  border-radius: var(--r-md);
}

.legal-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--t-small);
}

.legal-table th,
.legal-table td {
  padding: 0.8rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--paper-3);
  line-height: 1.5;
  color: var(--ink-2);
}

.legal-table th {
  background: var(--paper-2);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

.legal-table tr:last-child td {
  border-bottom: 0;
}

.legal a {
  color: var(--rust);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.legal-back {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--paper-3);
  font-weight: 600;
}

/* ------------------------------------------------------------- motion ---- */

/* Content is visible by default. Only when scripting is available does the
   page opt in to the reveal, so a blocked or failed script can never leave
   the page blank. */
.js .reveal {
  opacity: 0;
  transform: translateY(1.5rem);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Screens come up a touch later and a touch further, so the copy lands first
   and the product follows it. */
.js .ch-visual.reveal {
  transform: translateY(2.25rem) scale(0.985);
  transition:
    opacity 0.85s var(--ease) 0.08s,
    transform 0.85s var(--ease) 0.08s;
}

.js .ch-visual.reveal.is-in {
  transform: none;
}

/* the phone settles in after the desktop it sits on */
.js .ch-visual.reveal .ch-phone {
  opacity: 0;
  transform: translateY(1.25rem);
  transition:
    opacity 0.6s var(--ease) 0.34s,
    transform 0.6s var(--ease) 0.34s;
}

.js .ch-visual.reveal.is-in .ch-phone {
  opacity: 1;
  transform: none;
}

.js .board .chip {
  opacity: 0;
  transform: translateY(0.5rem) scale(0.98);
}

.js .board.is-in .chip {
  animation: chip-in 0.55s var(--ease) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 250ms);
}

@keyframes chip-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.js .float-card {
  opacity: 0;
  transform: translateY(1rem);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
  transition-delay: 0.75s;
}

.js .board-wrap.is-in .float-card {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------- responsive ---- */

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

  .hero-copy {
    max-width: 34rem;
  }

  .board-note {
    margin-top: 3.5rem;
  }

  .ch-in,
  .ch-left .ch-in {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .ch-left .ch-copy,
  .ch-left .ch-visual {
    order: initial;
  }

  .nz-in,
  .ai-in,
  .payroll-in,
  .straight-in {
    grid-template-columns: 1fr;
  }

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

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

  .frow-caps {
    grid-column: 2;
  }

  .plans {
    grid-template-columns: 1fr;
    max-width: 32rem;
  }

  .plans-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: none;
  }

  .plan-for,
  .plan-note {
    min-height: 0;
  }

  .foot-in {
    grid-template-columns: 1fr 1fr;
  }

  .foot-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .mainnav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem var(--gutter) 1.25rem;
    background: var(--paper);
    border-bottom: 1px solid var(--paper-3);
    font-size: var(--t-body);
  }

  .masthead.is-open .mainnav {
    display: flex;
  }

  .mainnav a {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--paper-2);
  }

  .burger {
    display: block;
    order: 3;
  }

  .masthead-cta {
    margin-left: auto;
    gap: 0.85rem;
  }

  /* Sign in moves from the header bar into the menu at the same breakpoint
     the burger appears, so it is never unreachable on a phone. */
  .signin {
    display: none;
  }

  .nav-signin {
    display: block;
  }
}

@media (max-width: 620px) {
  .board-body {
    padding: 0.75rem 0.75rem 0.4rem;
  }

  .lane {
    grid-template-rows: repeat(6, minmax(2rem, 1fr));
  }

  .chip span,
  .chip i {
    display: none;
  }

  .chip b {
    font-size: 0.75rem;
  }

  .shot-phone {
    position: static;
    width: 62%;
    margin: 0.9rem auto 0;
  }

  .board-note {
    margin-top: 1.5rem;
  }

  .int-list,
  .trustlist,
  .plans-4 {
    grid-template-columns: 1fr;
  }

  .fstats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .foot-in {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ----------------------------------------------------- reduced motion ---- */

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

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

  .js .reveal,
  .js .board .chip,
  .js .float-card {
    opacity: 1;
    transform: none;
  }

  .ticker.is-rolling {
    animation: none;
  }
}

/* --------------------------------------------------------------- print --- */

@media print {
  .masthead,
  .replaces,
  .close {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}