/* styles.css */
/* ===========================================================================
   Fonts, served from this origin.
   ---------------------------------------------------------------------------
   These used to come from fonts.googleapis.com, which meant a DNS lookup, a
   TLS handshake and 51KB of render-blocking stylesheet to a third party
   before the browser could paint anything. Declaring them here puts them in
   the same bundle as the rest of the CSS: no extra request at all, and the
   woff2 files come from a connection the browser has already opened.

   Latin and latin-ext only - the Google stylesheet declared 119 faces across
   every script it supports, and this site is in English.

   Regenerate with scratchpad/selfhost.mjs if the type ever changes.
   =========================================================================== */

@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/google-sans-400-normal-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/google-sans-400-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/google-sans-500-normal-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/google-sans-500-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/google-sans-600-normal-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/google-sans-600-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/google-sans-700-normal-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Google Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/google-sans-700-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-400-normal-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-400-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-500-normal-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-500-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-600-normal-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-mono-600-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-400-italic-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-400-italic.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-400-normal-ext.woff2') format('woff2');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/instrument-serif-400-normal.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ===========================================================================
   Trabbly HR — marketing site
   ---------------------------------------------------------------------------
   Deliberately not another blue SaaS page. The category is a sea of light-blue
   gradients and stock photographs of people laughing at laptops; this leans the
   other way — deep ink, a serif with an actual voice, and real numbers set in
   mono because the product's whole argument is that its numbers are right.

   Palette is the Trabbly brand: ink #004742, teal #14706A, spring #63E77F,
   over warm paper rather than pure white.
   =========================================================================== */

:root {
  --ink: #04231f;
  --ink-2: #004742;
  --teal: #14706a;
  --teal-soft: #3fae94;
  --spring: #63e77f;
  --paper: #faf7f1;
  --paper-2: #f3efe6;
  --line: #e3ddd0;
  --graphite: #1c2a27;
  --muted: #5f6f6b;
  --muted-light: rgba(255, 255, 255, 0.62);

  --display: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Google Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --wrap: 1180px;
  --r: 18px;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */

/* The `hidden` attribute is display:none in the UA stylesheet, and any author
   rule that sets `display` overrides it. `.form { display: grid }` did, so
   the demo page showed its details form, its code screen and its confirmation
   all at the same time. Kept here rather than beside that one rule, because
   the next `display` on a hideable element would bring the bug straight
   back. */
[hidden] {
  display: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Every page opens on a dark hero and ends on a dark footer, so the
     canvas behind them is dark too. Without a background of its own, html
     takes the canvas from body - and rubber-banding past either end of
     the page flashed the paper colour against the dark band it was
     attached to. */
  background: var(--ink);
}
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--graphite);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  z-index: 999;
}
.skip:focus {
  left: 12px;
  top: 12px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ── Type scale ──────────────────────────────────────────────────────────── */
.h2 {
  font-family: var(--display);
  font-weight: 400;
  /* Up from 3.35rem. A section heading was only ~70% of the hero's 4.8rem,
     which is close enough that scrolling past one did not feel like arriving
     somewhere new. At 3.75 the steps read as a scale — hero, section, body —
     rather than as two sizes of large. */
  font-size: clamp(2.15rem, 4.8vw, 3.75rem);
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--ink);
  max-width: 20ch;

  /* Explicit, because there was none: the browser default for an h2 is about
     0.83em, so at this size every section title carried ~45px of accidental
     space beneath it. That is the gap under "What your Monday morning looks
     like" — not a layout decision, just an unset property. */
  margin: 0 0 26px;
}
.h2--light {
  color: #fff;
}
.h2 em {
  font-style: italic;
  color: var(--teal);
}

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--spring);
  margin-bottom: 18px;
}
.eyebrow--dark {
  color: var(--teal);
}

.body {
  color: var(--muted);
  font-size: 1.02rem;
  margin-top: 18px;
  max-width: 58ch;
}
.body--wide {
  max-width: 66ch;
}
.mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 12px;
  font-size: 0.92rem;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1),
    background 0.18s,
    border-color 0.18s,
    box-shadow 0.18s;
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(0);
}
.btn--lg {
  padding: 15px 30px;
  border-radius: 14px;
  font-size: 1rem;
}
.btn--full {
  width: 100%;
}
.btn--spring {
  background: var(--spring);
  color: var(--ink);
  box-shadow: 0 10px 30px -12px rgba(99, 231, 127, 0.85);
}
.btn--spring:hover {
  background: #7bf094;
  box-shadow: 0 16px 38px -14px rgba(99, 231, 127, 0.95);
}
.btn--solid {
  background: var(--ink-2);
  color: #fff;
}
.btn--solid:hover {
  background: var(--teal);
}
.btn--outline {
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}
.btn--outline:hover {
  border-color: var(--spring);
  color: var(--spring);
}
.gap .btn--outline,
.price .btn--outline,
.mods .btn--outline {
  border-color: var(--line);
  color: var(--ink);
}
.gap .btn--outline:hover,
.price .btn--outline:hover {
  border-color: var(--teal);
  color: var(--teal);
}
.btn--ghost {
  color: #fff;
  opacity: 0.82;
}
.btn--ghost:hover {
  opacity: 1;
}

/* ── Texture ─────────────────────────────────────────────────────────────── */
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  /* Padding on the bar, not on the pill: on a narrow screen this is what
     insets the glass from the viewport edges, and on a wide one the wrap's own
     max-width has already done that job. */
  padding: 0 16px;
  transition: padding 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.nav.is-stuck {
  padding-top: 12px;
}
.nav__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 76px;
  border: 1px solid transparent;
  transition:
    height 0.3s cubic-bezier(0.2, 0.8, 0.3, 1),
    background 0.3s,
    border-color 0.3s,
    border-radius 0.3s,
    box-shadow 0.3s;
}
.nav__logo {
  height: 30px;
  width: auto;
}

/* Frosted glass rather than a solid bar, and dark rather than paper: every
   page is dark behind the header, so a pale bar was a bright slab cutting
   across it. The saturate() is what stops a blurred backdrop going grey and
   flat - without it this reads as fog, not glass.

   The pill is .nav__inner, not .nav, so it detaches from the edges and reads
   as floating over the page rather than bolted to the top of it. Staying dark
   also means the logo and the links keep the colours they already had, so
   nothing has to swap mid-scroll. */
.nav.is-stuck .nav__inner {
  height: 62px;
  border-radius: 20px;
  background: rgba(7, 40, 36, 0.5);
  backdrop-filter: blur(20px) saturate(170%);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.09) inset,
    0 18px 44px -20px rgba(0, 0, 0, 0.6);
}
/* Opaque where the browser cannot blur, otherwise it is unreadable text
   floating over the page. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav.is-stuck .nav__inner {
    background: rgba(7, 40, 36, 0.94);
  }
}
.nav__links {
  display: flex;
  gap: 26px;
  margin-left: auto;
  font-size: 0.9rem;
  font-weight: 600;
}
.nav__links a {
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.18s;
}
.nav__links a:hover {
  color: var(--spring);
}
.nav__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  background: linear-gradient(165deg, #04231f 0%, #004742 52%, #0b5c52 100%);
  color: #fff;
  padding: 168px 0 110px;
  overflow: hidden;
}
.hero__glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none;
}
.hero__glow--a {
  width: 620px;
  height: 620px;
  background: rgba(99, 231, 127, 0.24);
  top: -240px;
  right: -160px;
}
.hero__glow--b {
  width: 520px;
  height: 520px;
  background: rgba(63, 174, 148, 0.22);
  bottom: -260px;
  left: -180px;
}
.hero__glow--c {
  width: 560px;
  height: 560px;
  background: rgba(99, 231, 127, 0.18);
  top: -200px;
  left: 40%;
}
.hero__inner {
  position: relative;
}
.hero__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.6vw, 5.1rem);
  line-height: 1.02;
  letter-spacing: -0.022em;
  max-width: 16ch;
}
.hero__title em {
  font-style: italic;
  color: var(--spring);
}
.hero__lede {
  margin-top: 26px;
  max-width: 60ch;
  color: var(--muted-light);
  font-size: 1.06rem;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 36px;
}
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  list-style: none;
  padding: 0;
  margin-top: 64px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 28px;
}
.hero__facts strong {
  display: block;
  font-family: var(--display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--spring);
}
.hero__facts span {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--muted-light);
}

/* ── The gap ─────────────────────────────────────────────────────────────── */
.gap {
  padding: 104px 0;
  background: var(--paper);
}
.gap__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(255px, 100%), 1fr));
  gap: 20px;
  margin-top: 48px;
}
.gap__card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 24px;
}
.gap__card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
}
.gap__who {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--teal);
  margin: 4px 0 14px;
  letter-spacing: 0.01em;
}
.gap__card p:last-child {
  font-size: 0.94rem;
  color: var(--muted);
}
.gap__card--us {
  background: linear-gradient(160deg, var(--ink-2), var(--teal));
  border-color: transparent;
  color: #fff;
}
.gap__card--us h3 {
  color: #fff;
}
.gap__card--us .gap__who {
  color: var(--spring);
}
.gap__card--us p:last-child {
  color: rgba(255, 255, 255, 0.78);
}

/* ── Payslip ─────────────────────────────────────────────────────────────── */
.slip {
  padding: 104px 0;
  background: var(--ink);
  color: #fff;
}
.slip__lede {
  margin-top: 18px;
  max-width: 62ch;
  color: var(--muted-light);
  font-size: 1rem;
}
.slip__panel {
  margin-top: 46px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  overflow: hidden;
}
.slip__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding: 22px 26px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.16);
}
.seg {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  padding: 4px;
}
.seg__btn {
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.66);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}
.seg__btn.is-on {
  background: var(--spring);
  color: var(--ink);
}
.slider {
  flex: 1;
  min-width: 260px;
}
.slider__label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.8rem;
  color: var(--muted-light);
  margin-bottom: 8px;
}
.slider__label output {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--spring);
}
.slider input {
  width: 100%;
  appearance: none;
  height: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.18);
  outline: none;
}
.slider input::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--spring);
  cursor: grab;
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 1px var(--spring);
}
.slider input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--spring);
  cursor: grab;
  border: 3px solid var(--ink);
}

.slip__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.slip__col {
  padding: 26px;
}
.slip__col--sep {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.slip__ch {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 16px;
}
.lines {
  margin: 0;
}
.lines .line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
  font-size: 0.93rem;
}
.lines .line span {
  color: rgba(255, 255, 255, 0.72);
}
.lines .line small {
  display: block;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.36);
}
.lines .line b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}
.lines .line--gross b {
  color: #fff;
}
.lines .line--minus b {
  color: #ffb4a8;
}
.net {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 18px;
  padding: 15px 18px;
  border-radius: 12px;
  background: rgba(99, 231, 127, 0.12);
  border: 1px solid rgba(99, 231, 127, 0.3);
}
.net span {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--spring);
}
.net strong {
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--spring);
}
.net--cost {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.16);
}
.net--cost span,
.net--cost strong {
  color: #fff;
}
.slip__note {
  margin-top: 14px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.44);
}
.slip__disclaim {
  padding: 16px 26px 22px;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.34);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Country layer ───────────────────────────────────────────────────────── */
.layer {
  padding: 104px 0;
  background: var(--paper-2);
}
.layer__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: start;
}
.ticks {
  list-style: none;
  padding: 0;
  margin-top: 26px;
  display: grid;
  gap: 10px;
}
.ticks li {
  position: relative;
  padding-left: 26px;
  font-size: 0.94rem;
  color: var(--muted);
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--spring);
  box-shadow: 0 0 0 3px rgba(99, 231, 127, 0.22);
}
.ticks--light li {
  color: var(--muted-light);
}

.layer__cards {
  display: grid;
  gap: 16px;
}
.ccard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
}
.ccard header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.flag {
  font-size: 1.6rem;
  line-height: 1;
}
.ccard h3 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
}
.ccard header p {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-soft);
}
.ccard ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 9px;
}
.ccard li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.86rem;
  padding-bottom: 9px;
  border-bottom: 1px dashed var(--line);
}
.ccard li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.ccard li span {
  color: var(--muted);
}
.ccard li em {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}
.ccard--next {
  background: transparent;
  border-style: dashed;
}
.ccard--next p {
  font-size: 0.88rem;
  color: var(--muted);
}

/* ── Modules ─────────────────────────────────────────────────────────────── */
.mods {
  padding: 104px 0;
  background: var(--paper);
}
.mods__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
  gap: 1px;
  margin-top: 48px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.mod {
  background: var(--paper);
  padding: 24px 22px;
  transition: background 0.22s;
}
.mod:hover {
  background: #fff;
}
.mod h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.32rem;
  color: var(--ink);
  margin-bottom: 6px;
}
.mod p {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.55;
}

/* ── Door ────────────────────────────────────────────────────────────────── */
.door {
  padding: 104px 0;
  background: linear-gradient(160deg, #04231f, #0b463f);
  color: #fff;
}
.door__grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: 64px;
  align-items: center;
}
.feed {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r);
  overflow: hidden;
}
.feed__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px 18px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--spring);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(99, 231, 127, 0.5);
  }
  50% {
    opacity: 0.7;
    box-shadow: 0 0 0 7px rgba(99, 231, 127, 0);
  }
}
.feed__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.9rem;
}
.feed__row:last-child {
  border-bottom: 0;
}
.feed__row b {
  flex: 1;
  font-weight: 600;
}
.feed__row time {
  font-family: var(--mono);
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.6);
}
.feed__row i {
  font-style: normal;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--spring);
  min-width: 48px;
  text-align: right;
}
.feed__row--muted {
  opacity: 0.42;
}
.feed__row--muted i {
  color: rgba(255, 255, 255, 0.5);
}
.pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
}
.pip--ok {
  background: var(--spring);
}

/* ── Trust ───────────────────────────────────────────────────────────────── */
.trust {
  padding: 104px 0;
  background: var(--paper-2);
}
.trust__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 20px;
  margin-top: 48px;
}
.tcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 24px;
}
.tcard h3 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 10px;
}
.tcard p {
  font-size: 0.92rem;
  color: var(--muted);
}

/* ── Pricing ─────────────────────────────────────────────────────────────── */
.price {
  padding: 104px 0;
  background: var(--paper);
}
.price__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 20px;
  margin-top: 48px;
  /* stretch, not start. `.plan` is already a flex column with `flex: 1` on its
     list, so every card was ready to fill the row and this one line was
     stopping it — leaving three cards of three different heights with their
     buttons at three different depths. */
  align-items: stretch;
}
.plan {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plan h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--ink);
}
.plan__for {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.plan__num {
  font-family: var(--display);
  font-size: 2.6rem;
  color: var(--ink);
  margin: 18px 0 6px;
  line-height: 1;
}
.plan__num small {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  margin-left: 6px;
}
.plan ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 26px;
  display: grid;
  gap: 10px;
  flex: 1;
}
.plan li {
  position: relative;
  padding-left: 24px;
  font-size: 0.9rem;
  color: var(--muted);
}
.plan li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--teal-soft);
  font-weight: 700;
}
.plan--feature {
  background: linear-gradient(165deg, var(--ink-2), var(--teal));
  border-color: transparent;
  color: #fff;
  position: relative;
  box-shadow: 0 30px 60px -30px rgba(0, 71, 66, 0.55);
}
.plan--feature h3,
.plan--feature .plan__num {
  color: #fff;
}
.plan--feature .plan__for {
  color: var(--spring);
}
.plan--feature li {
  color: rgba(255, 255, 255, 0.82);
}
.plan--feature li::before {
  color: var(--spring);
}
.plan--feature .plan__num small {
  color: rgba(255, 255, 255, 0.65);
}
.plan__flag {
  position: absolute;
  top: -12px;
  left: 26px;
  background: var(--spring);
  color: var(--ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}

/* ── Pricing controls ────────────────────────────────────────────────────── */
.pricebar__lead {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
}
.pricebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.seg--light {
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.seg--light .seg__btn {
  color: var(--muted);
}
.seg--light .seg__btn.is-on {
  background: var(--ink-2);
  color: #fff;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch__track {
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--line);
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.switch input:checked + .switch__track {
  background: var(--teal);
}
.switch input:checked + .switch__track .switch__knob {
  transform: translateX(18px);
}
.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.switch__text {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted);
}
.switch__text em {
  font-style: normal;
  margin-left: 6px;
  background: rgba(99, 231, 127, 0.22);
  color: var(--ink-2);
  font-weight: 700;
  font-size: 0.76rem;
  padding: 2px 8px;
  border-radius: 999px;
}

.plan__bench {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0 0 4px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}
.plan__bench b {
  color: var(--ink);
  text-decoration: line-through;
  text-decoration-color: rgba(0, 0, 0, 0.25);
}
.plan--feature .plan__bench {
  color: rgba(255, 255, 255, 0.62);
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
.plan--feature .plan__bench b {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.45);
}
.price__fine {
  margin-top: 26px;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: center;
  max-width: 70ch;
  margin-inline: auto;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq {
  padding: 104px 0;
  background: var(--paper-2);
}
.faq__wrap {
  max-width: 860px;
}
.faq__list {
  margin-top: 40px;
  border-top: 1px solid var(--line);
}
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 40px 22px 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink);
  position: relative;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--teal);
  transition: transform 0.22s;
}
.faq details[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.faq details p {
  padding: 0 40px 24px 0;
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 68ch;
}

/* ── CTA ─────────────────────────────────────────────────────────────────── */
.cta {
  position: relative;
  padding: 104px 0;
  background: linear-gradient(160deg, #04231f 0%, #004742 60%, #0b5c52 100%);
  color: #fff;
  overflow: hidden;
}
.cta__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* The closing band on content pages. It used to carry the whole demo form,
   which meant two copies of twelve fields to keep in step and a header button
   that only scrolled you down the page. The form now lives on /demo and this
   is a single centred column that sends you there. */
.cta__band {
  position: relative;
  max-width: 660px;
  margin-inline: auto;
  text-align: center;
}
/* .h2 carries max-width: 20ch and .slip__lede 62ch, neither with auto margins.
   Inside a centred band the text centres within each element's own box, but
   the box still sits flush-left - which put the heading about 70px left of the
   buttons and the lede beneath it. Centre the boxes, not just their text. */
.cta__band .h2,
.cta__band .slip__lede,
.cta__band .cta__fine {
  margin-inline: auto;
}
.cta__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
}
.cta__fine {
  margin-top: 18px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
}
/* Centred rather than left-aligned, since the band is. */
.cta__band .mascot--cta {
  margin-inline: auto;
}

/* The demo page is nothing but this section, so it needs the top clearance a
   page hero would normally provide under the fixed header. */
.cta--page {
  padding-top: 148px;
  padding-bottom: 88px;
}
.cta--page .eyebrow {
  color: var(--spring);
}

/* The demo page keeps the two-column split - pitch left, form right - so it
   only needs the email line styled. */
.demo__email {
  margin-top: 22px;
  font-size: 0.92rem;
  color: var(--muted-light);
}
.demo__email a {
  color: var(--spring);
}
.demo__email a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ── Section CTAs ─────────────────────────────────────────────────────────
   A solid/outlined pair closing a content section. btn--edge is the outlined
   half for light backgrounds: btn--outline is a white border with white text,
   built for the dark hero, and disappears on paper. */
.acts {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 46px;
}
.btn--edge {
  border-color: rgba(4, 35, 31, 0.22);
  color: var(--ink);
}
.btn--edge:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: rgba(20, 112, 106, 0.05);
}
.form {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 20px;
  padding: 26px;
  display: grid;
  gap: 14px;
}
.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form label,
.form .field {
  display: grid;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.66);
}
.field__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.66);
}
.form input,
.form select,
.form textarea {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 11px;
  padding: 11px 13px;
  color: #fff;
  /* 16px exactly, and not a pixel less. Safari zooms the whole page in when a
     focused field is smaller than that, which then leaves the rest of the form
     off-screen with no way back except pinching. The fix is the type size, not
     a maximum-scale on the viewport — that would also block the pinch. */
  font-size: 1rem;
  font-weight: 500;
  transition:
    border-color 0.18s,
    background 0.18s;
}

/* ── Field-level errors ────────────────────────────────────────────────────
   Against the field they belong to, not collected at the top: a list of
   problems above a nine-field form makes you hunt for the one it means. */
.field__err {
  font-size: 0.76rem;
  font-weight: 500;
  line-height: 1.45;
  color: #ffb4a8;
}
/* An empty slot must take no space, or every field carries a phantom gap. */
.field__err:empty {
  display: none;
}
.form input.is-bad,
.form select.is-bad,
.form textarea.is-bad {
  border-color: #ff8f7e;
  background: rgba(255, 92, 70, 0.1);
}
.form input::placeholder,
.form textarea::placeholder {
  color: rgba(255, 255, 255, 0.3);
}
.form input:focus,
.form select:focus,
.form textarea:focus {
  outline: none;
  border-color: var(--spring);
  background: rgba(0, 0, 0, 0.32);
}
.form select option {
  background: var(--ink);
}
.form textarea {
  resize: vertical;
}
.form .btn {
  margin-top: 4px;
}
.form__fine {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.4);
  text-align: center;
}
/* Hidden until it has something to say. A permanently reserved line of empty
   space reads as a rendering fault, and a message that appears in place is
   easier to notice than one that fades into a gap that was always there. */
.form__msg {
  display: none;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
}
.form__msg:not(:empty) {
  display: block;
}
.form__msg.is-ok,
.form__msg.is-bad {
  padding: 10px 14px;
  border-radius: 11px;
}
.form__msg.is-ok {
  color: var(--spring);
  background: rgba(99, 231, 127, 0.12);
  border: 1px solid rgba(99, 231, 127, 0.28);
}
.form__msg.is-bad {
  color: #ffc7bd;
  background: rgba(255, 92, 70, 0.12);
  border: 1px solid rgba(255, 120, 100, 0.3);
}
.hp {
  position: absolute !important;
  left: -9999px !important;
  opacity: 0;
  height: 0;
  width: 0;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.foot {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.6);
  padding: 64px 0 28px;
}
.foot__inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
}
.foot__brand img {
  height: 26px;
  margin-bottom: 16px;
}
.foot__brand p {
  font-size: 0.88rem;
  max-width: 34ch;
}

/* Social icons. Inline SVG so they inherit colour and cost no extra request.
   40px targets - a 20px icon is under the minimum comfortable tap size, and
   the footer is where thumbs are least accurate. */
.foot__social {
  display: flex;
  gap: 8px;
  margin-top: 22px;
}
.foot__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.62);
  transition:
    color 0.2s,
    border-color 0.2s,
    background 0.2s,
    transform 0.2s;
}
.foot__social svg {
  width: 17px;
  height: 17px;
  fill: currentColor;
}
.foot__social a:hover {
  color: var(--ink);
  background: var(--spring);
  border-color: var(--spring);
  transform: translateY(-2px);
}
.foot__social a:focus-visible {
  outline: 2px solid var(--spring);
  outline-offset: 3px;
}
.foot__col {
  display: grid;
  gap: 9px;
  align-content: start;
}
.foot__col h4 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 4px;
}
.foot__col a {
  font-size: 0.9rem;
  transition: color 0.18s;
}
.foot__col a:hover {
  color: var(--spring);
}
.foot__now {
  font-size: 0.9rem;
  color: var(--spring);
  font-weight: 600;
}
.foot__soon {
  font-size: 0.9rem;
  opacity: 0.42;
}
.foot__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 48px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.36);
}

/* ── Inner-page hero ─────────────────────────────────────────────────────── */
.phero {
  position: relative;
  background: linear-gradient(165deg, #04231f 0%, #004742 100%);
  color: #fff;
  padding: 150px 0 80px;
  overflow: hidden;
}
.phero h1 {
  font-family: var(--display);
  font-weight: 400;
  /* 5.2vw is 20px on a phone, so this sat on its 2.3rem floor at every
     mobile width - a page heading barely bigger than the paragraph under
     it. Scaled from the viewport properly it still reaches the same 4rem
     ceiling by tablet. */
  font-size: clamp(2.75rem, 10.5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 18ch;
}
.phero h1 em {
  font-style: italic;
  color: var(--spring);
}
.phero p {
  margin-top: 20px;
  max-width: 58ch;
  color: var(--muted-light);
  font-size: 1.04rem;
}
.phero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* ── Nav active state ────────────────────────────────────────────────────── */
.nav__links a.is-here {
  color: var(--spring);
}

/* ── Calculator additions ────────────────────────────────────────────────── */
.calc__country {
  display: grid;
  gap: 6px;
  min-width: 210px;
}
.calc__country span {
  font-size: 0.8rem;
  color: var(--muted-light);
}
.calc__country select {
  appearance: none;
  background: rgba(0, 0, 0, 0.28)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2363E77F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 14px center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 11px;
  padding: 11px 38px 11px 14px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.calc__country select:focus {
  outline: none;
  border-color: var(--spring);
}
.calc__country option,
.calc__country optgroup {
  background: var(--ink);
  color: #fff;
}

/* ── Country picker with flags ──────────────────────────────────────────────
   Only present on a device with a fine pointer, where the native select cannot
   show a flag. The button deliberately matches .calc__country select exactly,
   so nothing moves when the picker takes over. */
.calc__country select.cpick__native {
  display: none;
}
.cpick {
  position: relative;
}
.cpick__btn {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  appearance: none;
  background: rgba(0, 0, 0, 0.28)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2363E77F' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right 14px center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 11px;
  padding: 11px 38px 11px 14px;
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.cpick__btn:hover {
  border-color: rgba(255, 255, 255, 0.34);
}
.cpick__btn:focus-visible,
.cpick__btn[aria-expanded='true'] {
  outline: none;
  border-color: var(--spring);
}
.cpick__flag {
  width: 21px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.cpick__btnflag {
  display: flex;
  flex-shrink: 0;
}
.cpick__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cpick__list {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  min-width: 240px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  box-shadow: 0 26px 52px -22px rgba(0, 0, 0, 0.75);
}
.cpick__group {
  padding: 9px 10px 5px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-light);
}
.cpick__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  color: #fff;
  font-size: 0.93rem;
  font-weight: 500;
  cursor: pointer;
}
.cpick__opt.is-active {
  background: rgba(99, 231, 127, 0.16);
}
.cpick__opt[aria-selected='true'] {
  font-weight: 700;
}
.cpick__opt[aria-selected='true']::after {
  content: '';
  width: 6px;
  height: 6px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--spring);
  flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .cpick__opt {
    transition: none;
  }
}

.soon {
  padding: 54px 26px;
  text-align: center;
}
.soon h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.8rem;
  color: #fff;
  margin-bottom: 10px;
}
.soon p {
  max-width: 46ch;
  margin: 0 auto 22px;
  color: var(--muted-light);
  font-size: 0.96rem;
}
.soon form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  max-width: 460px;
  margin: 0 auto;
}
.soon input[type='email'] {
  flex: 1;
  min-width: 220px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 11px;
  padding: 12px 14px;
  color: #fff;
  font-size: 0.95rem;
}
.soon input::placeholder {
  color: rgba(255, 255, 255, 0.32);
}
.soon input:focus {
  outline: none;
  border-color: var(--spring);
}

/* ── Comparison table ────────────────────────────────────────────────────── */
.cmp {
  margin-top: 44px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
}
.cmp table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}
.cmp th,
.cmp td {
  padding: 15px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  vertical-align: top;
}
.cmp thead th {
  background: var(--paper-2);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  position: sticky;
  top: 0;
}
.cmp thead th.is-us {
  background: var(--ink-2);
  color: #fff;
}
.cmp tbody th {
  font-weight: 700;
  color: var(--ink);
  width: 210px;
}
.cmp td {
  color: var(--muted);
}
.cmp td.is-us {
  background: rgba(99, 231, 127, 0.07);
  color: var(--ink);
  font-weight: 600;
}
.cmp tr:last-child th,
.cmp tr:last-child td {
  border-bottom: 0;
}

/* ── Module groups ───────────────────────────────────────────────────────── */
.group {
  margin-top: 60px;
}
.group__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}
.group__head h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.9rem;
  color: var(--ink);
}
.group__head p {
  font-size: 0.9rem;
  color: var(--muted);
}
.group__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 22px;
}
.feature h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.feature p {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.58;
}

/* ── Stat strip ──────────────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  margin-top: 44px;
}
.stat {
  background: #fff;
  padding: 26px 22px;
}
.stat b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--teal);
}
.stat span {
  display: block;
  margin-top: 8px;
  font-size: 0.85rem;
  color: var(--muted);
}

/* ── Prose blocks on inner pages ─────────────────────────────────────────── */
.split {
  display: grid;
  /* minmax(0, 1fr), not 1fr. A 1fr track takes its minimum from its content,
     so one wide descendant — here the comparison table, which is deliberately
     720px and meant to scroll inside its own container — stops the column ever
     shrinking to the viewport, and the whole column overflows on a phone. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: start;
  margin-top: 60px;
}
.split--tight {
  gap: 44px;
}
@media (max-width: 940px) {
  .split {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
}

.callout {
  border-left: 3px solid var(--spring);
  padding: 4px 0 4px 20px;
  margin: 26px 0;
}
.callout p {
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1.35;
  color: var(--ink);
  max-width: 32ch;
}

/* ── Long-form pages (privacy, terms) ────────────────────────────────────── */
.doc {
  padding: 130px 0 90px;
  background: var(--paper);
}
.doc__wrap {
  max-width: 760px;
}
.doc h1 {
  max-width: none;
}
.doc__stamp {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--muted);
}
.doc__draft {
  margin: 30px 0 8px;
  padding: 16px 18px;
  border-radius: 12px;
  background: #fff6e6;
  border: 1px solid #f0dcb4;
  font-size: 0.9rem;
  color: #6b5320;
  line-height: 1.6;
}
.doc h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.65rem;
  color: var(--ink);
  margin-top: 42px;
  margin-bottom: 10px;
}
.doc p,
.doc li {
  color: var(--muted);
  font-size: 0.98rem;
}
.doc p {
  margin-bottom: 14px;
}
.doc ul {
  margin: 0 0 18px;
  padding-left: 20px;
  display: grid;
  gap: 10px;
}
.doc a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.doc strong {
  color: var(--ink);
}
.doc__back {
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

/* ── Reveal ──────────────────────────────────────────────────────────────── */
/* Only hidden when JavaScript is actually running. An earlier version hid these
   unconditionally, which meant a script error — or simply opening the file over
   file:// where module imports are blocked — rendered the whole page blank.
   Content must survive its own animation failing. */
.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.8, 0.3, 1),
    transform 0.7s cubic-bezier(0.2, 0.8, 0.3, 1);
  transition-delay: var(--d, 0ms);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 940px) {
  .layer__grid,
  .door__grid,
  .cta__grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .foot__inner {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  body {
    font-size: 16px;
  }
  .nav__inner {
    gap: 16px;
  }
  .hero {
    padding: 130px 0 84px;
  }
  .hero__facts {
    gap: 30px;
  }
  .hero__facts strong {
    font-size: 2rem;
  }
  .slip__body {
    grid-template-columns: 1fr;
  }
  .slip__col--sep {
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .form__row {
    grid-template-columns: 1fr;
  }
  /* The card's own padding is the first thing to give: on a 390px screen it
     was taking 52px of the 350px available to the fields inside it. */
  .form {
    padding: 20px;
  }
  .done {
    padding: 30px 20px;
  }
  .foot__inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .gap,
  .slip,
  .layer,
  .mods,
  .door,
  .trust,
  .price,
  .faq,
  .cta {
    padding: 72px 0;
  }
}

/* ── Narrow phones ────────────────────────────────────────────────────────
   With the burger gone the header is three items in a row, so they have to
   fit unaided. At 360px the default sizes overflow by roughly 100px; this
   claws it back from padding rather than dropping "Sign in", which is the
   only route to the app from the marketing site. */
@media (max-width: 560px) {
  .nav__inner {
    gap: 10px;
  }
  .nav__logo {
    height: 25px;
  }
  .nav__links {
    gap: 14px;
    font-size: 0.84rem;
  }
  .nav__actions {
    gap: 4px;
  }
  /* The ghost button carries no background, so its padding is buying nothing
     here - it can read as a plain link and give the space back. */
  .nav__actions .btn--ghost {
    padding: 6px 4px;
    font-size: 0.84rem;
  }
  .nav__actions .btn--solid {
    padding: 9px 14px;
    font-size: 0.84rem;
  }

  .form {
    padding: 16px;
    border-radius: 16px;
  }
  .done {
    padding: 26px 16px;
  }
  .done__title {
    font-size: 1.6rem;
  }
  /* The dialling-code button and the number share a row down to here. Below
     it the number field is left with about 12 characters, so the code moves
     to its own line and the number gets the full width. */
  .tel {
    grid-template-columns: 1fr;
  }
  .dial__btn {
    width: 100%;
    justify-content: flex-start;
  }
  .dial__pop {
    width: 100%;
  }
  /* The code is transcribed digit by digit, so it keeps its size — but 0.42em
     of tracking on six digits overflows a narrow field. */
  .verify__field input {
    font-size: 1.3rem;
    letter-spacing: 0.24em;
  }
}

/* ── Responsive backstops ─────────────────────────────────────────────────
   Every known overflow is fixed at its source above. This is the guard for
   the ones nobody has found yet: on a marketing site a single stray element
   dragging the page sideways ruins every section, not just its own.

   clip rather than hidden - hidden on the body creates a scroll container,
   which would break position: sticky anywhere inside it. Fallback first for
   browsers without clip. */
html,
body {
  overflow-x: hidden;
}
@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

/* Nothing may be wider than its column. Long unbroken strings - an email
   address, a URL in a legal page - are the usual culprit. */
img,
svg,
video,
table {
  max-width: 100%;
}
p,
li,
h1,
h2,
h3,
h4 {
  overflow-wrap: break-word;
}

@media (max-width: 620px) {
  /* Side-by-side CTAs wrap to two ragged half-width buttons at this size.
     Stacked and full width they read as a deliberate pair and give a thumb
     something to actually hit. */
  .acts,
  .cta__acts,
  .hero__cta,
  .stage__cta {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .acts .btn,
  .cta__acts .btn,
  .hero__cta .btn,
  .stage__cta .btn {
    width: 100%;
  }
  /* btn--lg is 30px of horizontal padding on a 312px screen; the label needs
     that room more than the button does. */
  .btn--lg {
    padding: 14px 18px;
  }
}

/* ── Demo form: country picker, verification step ────────────────────────────
   Built here rather than pulled in: a select with 200 options is unusable, and
   a library for one field on one page is not worth the bytes. */

.opt {
  font-weight: 400;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.4);
}

/* ── Select ────────────────────────────────────────────────────────────────
   The native arrow sits hard against the last character on Chrome and inside
   the border on Safari. Drawing our own means the gap can be chosen, and it
   is the same arrow as the dialling-code button below. */
.sel {
  position: relative;
  display: grid;
}
.sel select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  cursor: pointer;
}
.sel__caret {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 8px;
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
}

/* ── Phone ─────────────────────────────────────────────────────────────────
   Dialling code and number are one field wearing two controls. The code is a
   searchable button rather than a select, because a native dropdown of 230
   dialling codes can be scrolled but not searched. */
.tel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
}
.dial {
  position: relative;
}
.dial__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  /* Room on the right for the caret, which is positioned against .dial so it
     lands in the same place whether the button is auto or full width. */
  padding: 11px 36px 11px 13px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 11px;
  color: #fff;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.18s,
    background 0.18s;
}
.dial__btn:hover,
.dial__btn[aria-expanded='true'] {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(0, 0, 0, 0.32);
}
.dial__btn:focus-visible {
  outline: none;
  border-color: var(--spring);
}
.dial__flag {
  font-size: 1.1rem;
  line-height: 1;
}
.dial__code {
  font-variant-numeric: tabular-nums;
}
.dial__pop {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  /* Never wider than the phone it is on. */
  width: min(330px, 80vw);
  display: grid;
  gap: 6px;
  padding: 8px;
  background: #0d3a35;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.7);
}

.pick {
  position: relative;
  display: grid;
  gap: 6px;
}
.pick__label {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.72);
}

/* Chips sit above the input rather than inside it: inside, a long list pushes
   the caret around and the field stops behaving like a text box. */
.pick__chips:not(:empty) {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}
.pick__chips .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 10px;
  border-radius: 999px;
  background: rgba(99, 231, 127, 0.16);
  border: 1px solid rgba(99, 231, 127, 0.3);
  color: #fff;
  font-size: 0.8rem;
}
.pick__chips .chip__name {
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pick__chips .chip button {
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  /* A 24px target: the × glyph alone is about 8px, which is not a thing a
     thumb can reliably hit. */
  min-width: 24px;
  min-height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
}
.pick__chips .chip button:hover {
  color: #fff;
}

.pick__input {
  width: 100%;
}

.pick__list {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 4px;
  list-style: none;
  max-height: 216px;
  overflow-y: auto;
  background: #0d3a35;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, 0.7);
}
/* Inside the dialling-code popover the list is already in a panel, so it drops
   the panel of its own and just scrolls. */
.pick__list--inline {
  position: static;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  max-height: 244px;
}
.pick__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
}
.pick__list li:not(.pick__none):hover,
.pick__list li.is-active {
  background: rgba(99, 231, 127, 0.16);
  color: #fff;
}
/* Flags are emoji, not images: nothing to download, nothing to 404, and a
   platform without a flag font falls back to the two letters, which is a
   reasonable thing to see. */
.pick__flag {
  font-size: 1.1rem;
  line-height: 1;
}
/* Country names run long — "United States Minor Outlying Islands". Truncate
   rather than wrap, so every row stays one line high. */
.pick__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pick__dial {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
.pick__list .pick__none {
  padding: 10px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.5);
  cursor: default;
}

/* ── Verification step ───────────────────────────────────────────────────── */
.verify__lead {
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.74);
  margin: 0;
}
.verify__lead b {
  color: #fff;
}

/* Wide tracking and a big size: a code is transcribed digit by digit, so the
   digits need to be individually legible rather than merely readable. */
.verify__field input {
  font-size: 1.5rem;
  letter-spacing: 0.42em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.verify__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.linkish {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.84rem;
  color: var(--spring);
  cursor: pointer;
}
.linkish:hover:not(:disabled) {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.linkish:disabled {
  color: rgba(255, 255, 255, 0.34);
  cursor: default;
}

/* ── Done ──────────────────────────────────────────────────────────────────
   The last thing they see, so it gets a moment rather than a one-line "thanks":
   confirmation of what happened, what happens next, and the one page worth
   reading while they wait. */
.done {
  text-align: center;
  padding: 34px 26px;
}
.done__tick {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(99, 231, 127, 0.18);
  color: var(--spring);
}
.done__tick svg {
  width: 24px;
  height: 24px;
  /* Drawn on arrival — the tick is the whole point of the screen. */
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: tick 0.5s cubic-bezier(0.65, 0, 0.35, 1) 0.12s forwards;
}
@keyframes tick {
  to {
    stroke-dashoffset: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .done__tick svg {
    animation: none;
    stroke-dashoffset: 0;
  }
}
.done__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.9rem;
  color: #fff;
  margin: 0 0 10px;
}
.done__text {
  font-size: 0.94rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 auto;
  max-width: 42ch;
}
.done__text b {
  color: #fff;
  font-weight: 600;
}
.done__next {
  margin: 18px auto 0;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  max-width: 42ch;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.58);
}

/* ===========================================================================
   The plan comparison table.
   ---------------------------------------------------------------------------
   Built by pricing.js from the catalogue, so nothing here assumes how many
   plans or rows there are. It sits inside a .layer band, which is --paper-2,
   so the table itself is --paper to lift off it.

   The first column is a <th scope="row"> rather than a <td>: a comparison
   table is read across, and a screen reader announcing the capability before
   each tick is the difference between it being usable and being noise.
   =========================================================================== */
.cmp__scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}
/* Scoped to a table. This block was written for a later markup pattern,
   .cmp__scroll > table.cmp, which no page ever shipped. Unscoped, its
   min-width landed on the div.cmp that the pricing and compare pages do use
   as their horizontal scroll container, so the container could not shrink to
   the viewport, never scrolled, and the table was clipped out of reach. */
table.cmp {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 15px;
}
.cmp thead th {
  padding: 18px 14px;
  text-align: center;
  border-bottom: 1px solid var(--line);
  vertical-align: bottom;
}
.cmp thead th:first-child {
  text-align: left;
  width: 44%;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}
.cmp__plan {
  display: block;
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.1;
  color: var(--graphite);
}
.cmp__rate {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cmp__group th {
  padding: 13px 14px 9px;
  text-align: left;
  background: var(--paper-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.cmp tbody th[scope='row'] {
  padding: 13px 14px;
  text-align: left;
  font-weight: 500;
  border-top: 1px solid var(--line);
}
.cmp tbody td {
  padding: 13px 14px;
  text-align: center;
  border-top: 1px solid var(--line);
}
.cmp__feat {
  display: block;
  color: var(--graphite);
}
.cmp__blurb {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
  color: var(--muted);
}
.cmp__yes {
  color: var(--teal);
  font-weight: 700;
  font-size: 17px;
}
.cmp__no {
  color: var(--muted);
  opacity: 0.4;
}
.cmp tbody tr:hover th[scope='row'],
.cmp tbody tr:hover td {
  background: rgba(20, 112, 106, 0.04);
}
.cmp tbody tr.cmp__group:hover th {
  background: var(--paper-2);
}

@media (max-width: 640px) {
  .cmp thead th:first-child {
    width: 50%;
  }
  .cmp__plan {
    font-size: 17px;
  }
}

/* ===========================================================================
   Floating actions — WhatsApp, and back to top.
   ---------------------------------------------------------------------------
   Injected by site.js so both appear on every page. Bottom-right, stacked,
   and deliberately quiet: they sit over the content for the whole visit, so
   anything that pulses or bounces becomes irritating by the second scroll.
   =========================================================================== */
.fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fab__btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition:
    transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1),
    box-shadow 0.2s,
    opacity 0.2s;
}
.fab__btn:hover {
  transform: translateY(-2px);
}
.fab__btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
.fab__btn[hidden] {
  display: none;
}

/* WhatsApp's own green, because a recoloured WhatsApp button reads as a
   generic chat widget and loses the recognition that makes it worth having. */
.fab__btn--chat {
  background: #25d366;
  color: #fff;
  box-shadow: 0 10px 24px -10px rgba(37, 211, 102, 0.75);
}
.fab__btn--chat:hover {
  box-shadow: 0 16px 30px -12px rgba(37, 211, 102, 0.85);
}

.fab__btn--top {
  background: #fff;
  color: var(--graphite);
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px -14px rgba(4, 35, 31, 0.45);
  animation: fab-in 0.22s ease-out;
}
@keyframes fab-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fab__btn {
    transition: none;
    animation: none;
  }
  .fab__btn:hover {
    transform: none;
  }
}

@media (max-width: 640px) {
  .fab {
    right: 14px;
    bottom: 14px;
  }
  .fab__btn {
    width: 42px;
    height: 42px;
  }
}

/* ── Products menu ───────────────────────────────────────────────────────────
   There is no longer a single page that lists everything, so the trigger is a
   button rather than a link. It opens on hover and on focus in CSS alone,
   which means it works with JavaScript switched off and on a touch screen,
   where a tap focuses the button. JavaScript only adds the niceties: the
   aria state, Escape, and closing when you click elsewhere.

   Icons are CSS masks rather than inline SVG because this markup is repeated
   in twelve HTML files; keeping the paths here means one place to change them
   and twelve pages that stay small. */
.menu {
  position: relative;
  display: flex;
  align-items: center;
}
.menu__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.78);
  transition: color 0.18s;
}
.menu__btn {
  /* It is a button; it should not look like one. */
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.menu__btn:hover,
.menu:focus-within .menu__btn,
.menu.is-open .menu__btn {
  color: var(--spring);
}
@media (hover: hover) and (pointer: fine) {
  .menu:hover .menu__btn {
    color: var(--spring);
  }
}
.menu__caret {
  width: 10px;
  height: 7px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.menu:focus-within .menu__caret,
.menu.is-open .menu__caret {
  transform: rotate(180deg);
}
@media (hover: hover) and (pointer: fine) {
  .menu:hover .menu__caret {
    transform: rotate(180deg);
  }
}

.menu__panel {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  width: 620px;
  padding: 12px;
  border-radius: 20px;
  /* Nearly opaque, not glass. A translucent panel reads fine over the dark
     hero and becomes unreadable the moment it opens over a paper section —
     and the blur that was meant to rescue it is the first thing a browser
     drops when it cannot composite. The tint still picks up the brand. */
  background: rgba(6, 36, 32, 0.975);
  backdrop-filter: blur(22px) saturate(170%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.13);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 30px 70px -26px rgba(0, 0, 0, 0.7);
  /* Closed state. visibility (not display) so the panel can animate, and so
     the links inside leave the tab order while it is shut. */
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%, -10px) scale(0.985);
  transform-origin: top center;
  transition:
    opacity 0.24s cubic-bezier(0.2, 0.8, 0.3, 1),
    transform 0.24s cubic-bezier(0.2, 0.8, 0.3, 1),
    visibility 0s linear 0.24s;
}
.menu:focus-within .menu__panel,
.menu.is-open .menu__panel {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  transition-delay: 0s, 0s, 0s;
}
/* Hover opens it, but only where there is a real pointer. On a touch screen a
   tap fires mouseenter too, which would open the panel and let the click that
   follows immediately toggle it shut again. */
@media (hover: hover) and (pointer: fine) {
  .menu:hover .menu__panel {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
    transition-delay: 0s, 0s, 0s;
  }
  .menu:hover .menu__item {
    animation: menu-item-in 0.3s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
    animation-delay: calc(60ms + var(--i) * 34ms);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .menu__panel {
    background: rgb(6, 36, 32);
  }
}

/* The hover bridge. Without it the 18px gap between the pill and the panel is
   dead ground, and the menu closes while the pointer is crossing it. */
.menu__panel::before {
  content: '';
  position: absolute;
  inset: -20px 0 100% 0;
}

.menu__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.menu__item {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 13px;
  align-items: start;
  padding: 12px 13px;
  border-radius: 13px;
  transition: background 0.18s;
}
.menu__item:hover,
.menu__item:focus-visible {
  background: rgba(255, 255, 255, 0.07);
}
.menu__ico {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition:
    background 0.18s,
    border-color 0.18s;
}
.menu__item:hover .menu__ico {
  background: rgba(99, 231, 127, 0.16);
  border-color: rgba(99, 231, 127, 0.4);
}
.menu__ico::before {
  content: '';
  width: 18px;
  height: 18px;
  background-color: var(--spring);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.menu__item b {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}
.menu__item i {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.55);
}

/* Each item arrives a beat after the one before it, but only on the way in —
   closing all at once reads as dismissal, which is what it is. */
.menu__item {
  opacity: 0;
  transform: translateY(6px);
}
.menu:focus-within .menu__item,
.menu.is-open .menu__item {
  animation: menu-item-in 0.3s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  animation-delay: calc(60ms + var(--i) * 34ms);
}
@keyframes menu-item-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.menu__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 10px;
  padding: 13px 13px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.8rem;
}
.menu__foot a {
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.18s;
}
.menu__foot a:hover {
  color: var(--spring);
}
.menu__foot strong {
  color: var(--spring);
  font-weight: 600;
}

.menu__ico--leave {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M8 2.5v4M16 2.5v4M3 10h18M9 15.5l2 2 4-4.5'/%3E%3C/svg%3E");
}
.menu__ico--time {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 6.8V12l3.6 2.1'/%3E%3C/svg%3E");
}
.menu__ico--payroll {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2.5h12v19l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9.5 8h5M9.5 12h5'/%3E%3C/svg%3E");
}
.menu__ico--performance {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Ccircle cx='12' cy='12' r='4.4'/%3E%3Ccircle cx='12' cy='12' r='.9'/%3E%3C/svg%3E");
}
.menu__ico--hiring {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='8' r='3.6'/%3E%3Cpath d='M3 20c0-3.5 2.9-5.6 6.5-5.6'/%3E%3Cpath d='M17 12.5v7M13.5 16h7'/%3E%3C/svg%3E");
}
.menu__ico--analytics {
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 20.5h18'/%3E%3Cpath d='M6 20.5V12M11 20.5V5.5M16 20.5v-6M20.5 20.5V9'/%3E%3C/svg%3E");
}

/* The products panel is a desktop dropdown only. Below this width the whole
   header collapses into a drawer instead - see the burger and drawer rules
   at the end of this file. */
@media (max-width: 860px) {
  .menu__panel {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu__panel,
  .menu__caret {
    transition: none;
  }
  .menu__item {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ── Closing split ───────────────────────────────────────────────────────────
   The old closer was a centred heading, a centred paragraph and centred
   buttons on a flat gradient — the same shape at the bottom of every page, and
   the weakest thing on any of them. This answers the page's last open question
   instead, with the ask on one side and a straight answer on the other. */
.close__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: 64px;
  align-items: center;
}
.close__grid .h2 {
  max-width: 14ch;
}
.close__lede {
  max-width: 46ch;
  margin: 0;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--muted-light);
}
.close__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.kit {
  padding: 8px 26px 22px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 70px -34px rgba(0, 0, 0, 0.6);
}
.kit__ttl {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 18px 0 4px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.kit__row {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 14px;
  align-items: start;
  padding: 15px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.kit__row svg {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--spring);
}
.kit__row--ask svg {
  color: rgba(255, 255, 255, 0.4);
}
.kit__row b {
  display: block;
  font-size: 0.92rem;
  color: #fff;
}
.kit__row span {
  display: block;
  margin-top: 3px;
  font-size: 0.83rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 940px) {
  .close__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .close__grid .h2 {
    max-width: 18ch;
  }
}

/* ── Split page hero ─────────────────────────────────────────────────────────
   Shared by the feature pages: the claim on one side, the product doing the
   thing on the other. Lives here rather than in a page stylesheet because
   more than one page needs it. */
.phero--split {
  padding: 132px 0 86px;
}
.phero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: 56px;
  align-items: center;
}
.phero--split h1 {
  max-width: 15ch;
}
.phero--split p {
  max-width: 47ch;
}

/* The feed is seeded with five rows and then replaces its oldest, so it never
   changes height once it is on screen. */
.feed__cap {
  margin: 14px 0 0;
  font-size: 0.76rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.45);
}
.feed__cap b {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 600;
}

@media (max-width: 940px) {
  .phero--split {
    padding: 120px 0 72px;
  }
  .phero__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ── Figures strip: a note under the numbers ─────────────────────────────── */
.figures__as {
  margin: 26px 0 0;
  font-size: 0.74rem;
  color: var(--muted);
}

/* ── Section lede ────────────────────────────────────────────────────────────
   The paragraph under a section heading. It was defined inside one page's
   stylesheet and then used on three pages, so on two of them it was silently
   rendering as an unstyled full-width paragraph. */
.lede {
  max-width: 58ch;
  margin: 0 0 40px;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--muted);
}
.slip .lede,
.cta .lede {
  color: var(--muted-light);
}

/* ── Seeded stat cards ───────────────────────────────────────────────────────
   Three dark cards of label-and-figure rows, for a dark section. Used by the
   leave page for statutory entitlements and by the case study for what going
   first actually cost us. */
.seed__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 46px;
}
.seed {
  padding: 22px 24px;
  border-radius: var(--r);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.seed__where {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--spring);
  margin-bottom: 14px;
}
.seed__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.62);
}
.seed__line b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
.seed__line:first-of-type {
  border-top: 0;
}

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

.seed__note {
  margin: 12px 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.55);
}

/* ── Header fit on a phone ───────────────────────────────────────────────────
   The header is three groups on one row with no burger, and below 560px they
   stopped fitting: the brand was being squeezed to zero width and the demo
   button ran off the right edge. A fixed-position header can overflow the
   viewport without changing the document's scroll width, so nothing caught it.

   Pricing and Customers come out of the row first — both are in the products
   panel footer and in the page footer, while the Products control is the only
   thing in the header that reaches all six product pages. */
@media (max-width: 560px) {
  .nav__links > a {
    display: none;
  }
}
@media (max-width: 420px) {
  .nav__logo {
    height: 22px;
  }
  /* "Book a demo" becomes "Book". The destination is unchanged. */
  .btn__long {
    display: none;
  }
}

/* ── Burger and drawer ───────────────────────────────────────────────────────
   Below 860px the header collapses to a logo and a burger, and everything it
   held slides in from the left. The drawer is built by site.js from the nav
   that is already in the markup, so there is one list of products in the HTML
   rather than a desktop copy and a mobile copy that drift apart.

   All of it is gated on .js, which the inline bootstrap script sets. With
   JavaScript off the header keeps the links it always had, so the site never
   ends up with a burger that cannot open.
   =========================================================================== */

.burger {
  display: none;
  position: relative;
  width: 42px;
  height: 42px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.burger i {
  position: absolute;
  left: 11px;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition:
    transform 0.34s cubic-bezier(0.5, -0.4, 0.4, 1.4),
    opacity 0.18s ease;
}
.burger i:nth-child(1) {
  top: 14px;
}
.burger i:nth-child(2) {
  top: 20px;
}
.burger i:nth-child(3) {
  top: 26px;
}
/* Into a cross: the outer bars meet in the middle and cross, the middle one
   goes. The translate has to come before the rotate or they arrive bent. */
.burger.is-on i:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.burger.is-on i:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.4);
}
.burger.is-on i:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

.drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  transition: visibility 0s linear 0.42s;
}
.drawer.is-open {
  visibility: visible;
  transition-delay: 0s;
}
.drawer__veil {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  padding: 0;
  background: rgba(2, 18, 16, 0.58);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.38s ease;
}
.drawer.is-open .drawer__veil {
  opacity: 1;
}

.drawer__panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(318px, 82vw);
  display: flex;
  flex-direction: column;
  padding: 18px 20px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(170deg, #06302a 0%, #04231f 100%);
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 30px 0 70px -30px rgba(0, 0, 0, 0.7);
  transform: translateX(-100%);
  transition: transform 0.42s cubic-bezier(0.3, 0.9, 0.3, 1);
}
.drawer.is-open .drawer__panel {
  transform: none;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.drawer__head img {
  height: 26px;
  width: auto;
}
.drawer__close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}
.drawer__close svg {
  width: 17px;
  height: 17px;
}

.drawer__label {
  margin: 16px 0 6px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
}

.drawer__item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 13px;
  align-items: center;
  padding: 12px 10px;
  margin: 0 -10px;
  border-radius: 12px;
  transition: background 0.18s;
}
.drawer__item:active {
  background: rgba(255, 255, 255, 0.07);
}
.drawer__item .menu__ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}
.drawer__item .menu__ico::before {
  width: 16px;
  height: 16px;
}
.drawer__item b {
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
}
.drawer__plain {
  display: block;
  padding: 12px 10px;
  margin: 0 -10px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
}

.drawer__actions {
  display: grid;
  gap: 10px;
  margin-top: auto;
  padding-top: 22px;
}
.drawer__actions .btn {
  width: 100%;
  justify-content: center;
}

/* Each row arrives a beat after the one above it, once the panel itself has
   started moving. Only on the way in. */
.drawer__item,
.drawer__plain,
.drawer__actions {
  opacity: 0;
  transform: translateX(-10px);
}
.drawer.is-open .drawer__item,
.drawer.is-open .drawer__plain,
.drawer.is-open .drawer__actions {
  animation: drawer-row 0.36s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  animation-delay: calc(130ms + var(--i, 0) * 38ms);
}
@keyframes drawer-row {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Keyed on .has-drawer, which site.js sets only once the burger is in the
   page — not on .js, which is true the moment the document loads. If the
   script fails for any reason, the header keeps the links it always had
   rather than hiding them for a burger that never arrived. */
@media (max-width: 860px) {
  .has-drawer .nav__links,
  .has-drawer .nav__actions {
    display: none;
  }
  .has-drawer .burger {
    display: block;
  }
}
@media (min-width: 861px) {
  .drawer {
    display: none;
  }
}

body.is-drawer-open {
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .burger i,
  .drawer,
  .drawer__veil,
  .drawer__panel {
    transition: none;
  }
  .drawer__item,
  .drawer__plain,
  .drawer__actions {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ── Header on a phone ───────────────────────────────────────────────────────
   The bar carries 16px of its own padding so the glass pill insets from the
   edges when it sticks, and .wrap adds 24px on top — which left the logo 40px
   in while the page content started at 24px. Inside the bar the wrap gives
   back what the bar already spent, so the two line up.

   The logo also shrank twice on the way down, to fit a header that had to hold
   five items. It holds two now, so it can have its size back. */
@media (max-width: 860px) {
  .has-drawer .nav__inner {
    padding-inline: 8px;
  }
  .has-drawer .nav__logo {
    height: 30px;
  }
}

/* sections.css */
/* ===========================================================================
   Homepage sections that do something.
   =========================================================================== */

/* ── Figures strip ───────────────────────────────────────────────────────── */
.figures {
  background: var(--paper);
  padding: 46px 0;
  border-bottom: 1px solid var(--line);
}
.figures__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.figure {
  border-left: 2px solid rgba(20, 112, 106, 0.22);
  padding-left: 18px;
}
.figure b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 3rem;
  line-height: 1;
  color: var(--teal);
  font-variant-numeric: tabular-nums;
}
.figure span {
  display: block;
  margin-top: 7px;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 22ch;
}
@media (max-width: 760px) {
  .figures__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .figure b {
    font-size: 2.3rem;
  }
}

/* ── Positioning chart ───────────────────────────────────────────────────── */
.plot {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 44px;
  align-items: center;
  margin-top: 46px;
}
/* Clipped, not visible. A rotated end-anchored axis label was drawing upward
   out of the viewBox and landing on the paragraph above it. */
.plot svg {
  width: 100%;
  height: auto;
  overflow: hidden;
}

.plot__grid line {
  stroke: var(--line);
  stroke-width: 1;
  stroke-dasharray: 3 6;
}
.plot__axis line {
  stroke: rgba(28, 42, 39, 0.35);
  stroke-width: 1.4;
}
.plot__axis path {
  fill: rgba(28, 42, 39, 0.35);
}
.plot__ax {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  fill: var(--muted);
}
.plot__ax--end {
  text-anchor: end;
}
.plot__ay {
  text-anchor: middle;
}

/* The hole in the market. Drawn as a soft dashed field rather than a hard
   shape, because it is an absence, not a thing. */
.plot__hole ellipse {
  fill: rgba(99, 231, 127, 0.09);
  stroke: rgba(20, 112, 106, 0.35);
  stroke-width: 1.4;
  stroke-dasharray: 5 7;
}
.plot__hole text {
  font-family: var(--display);
  font-style: italic;
  font-size: 17px;
  fill: var(--teal);
  text-anchor: middle;
}

.plot__dot circle {
  fill: #fff;
  stroke: var(--line);
  stroke-width: 1.5;
}
.plot__dot text {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  fill: var(--ink);
  text-anchor: middle;
}
.plot__cap {
  font-size: 11px !important;
  font-weight: 500 !important;
  fill: var(--muted) !important;
}

.plot__dot--us circle {
  fill: var(--ink-2);
  stroke: var(--teal);
  stroke-width: 2;
}
.plot__dot--us text {
  fill: #fff;
}
.plot__halo {
  fill: none !important;
  stroke: var(--spring) !important;
  stroke-width: 1.5 !important;
  opacity: 0.5;
}

/* Everything lands on scroll, in reading order, us last. */
.plot__dot,
.plot__hole {
  opacity: 0;
  transform: scale(0.82);
  transform-origin: center;
  transform-box: fill-box;
}
.plot.is-in .plot__dot,
.plot.is-in .plot__hole {
  animation: pop 0.62s cubic-bezier(0.2, 1.3, 0.4, 1) forwards;
  animation-delay: calc(var(--i) * 130ms);
}
@keyframes pop {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.plot.is-in .plot__halo {
  animation: halo 2.6s 1.3s ease-out infinite;
}
@keyframes halo {
  0% {
    r: 40;
    opacity: 0.55;
  }
  70%,
  100% {
    r: 66;
    opacity: 0;
  }
}

.plot__key {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 16px;
}
.plot__key li {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--muted);
  padding-left: 16px;
  border-left: 2px solid var(--line);
}
.plot__key b {
  display: block;
  color: var(--ink);
  font-size: 0.92rem;
  margin-bottom: 2px;
}
.plot__key .is-us {
  border-left-color: var(--spring);
}
.plot__key .is-us b {
  color: var(--teal);
}

@media (max-width: 900px) {
  .plot {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* ── Employee journey ────────────────────────────────────────────────────
   The hero promises to manage the whole employee journey and nothing on the
   page showed it. Six stops on one line, because the line is the argument:
   it is continuous, so the handovers that usually leak do not exist. */
.journey {
  background: var(--paper-2);
  padding: 104px 0;
}

.track {
  position: relative;
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}

/* The thread everything hangs off. Drawn left to right on arrival. */
.track__line {
  position: absolute;
  top: 21px;
  left: 4%;
  right: 4%;
  height: 2px;
  background: linear-gradient(to right, var(--teal-soft), var(--teal), var(--teal-soft));
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 2px;
}
.track.is-in .track__line {
  animation: thread 1.15s 0.15s cubic-bezier(0.3, 0.8, 0.3, 1) forwards;
}
@keyframes thread {
  to {
    transform: scaleX(1);
  }
}

.stop {
  position: relative;
  opacity: 0;
  transform: translateY(12px);
}
.track.is-in .stop {
  animation: stop-in 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  animation-delay: calc(0.35s + var(--i) * 0.13s);
}
@keyframes stop-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.stop__pin {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #fff;
  border: 2px solid var(--teal);
  color: var(--teal);
  margin-bottom: 16px;
  box-shadow: 0 8px 18px -8px rgba(20, 112, 106, 0.4);
}
.stop__pin svg {
  width: 21px;
  height: 21px;
}
/* The last stop is the payslip — the one everybody is waiting for. */
.stop:last-child .stop__pin {
  background: var(--ink-2);
  border-color: var(--ink-2);
  color: var(--spring);
}

.stop__when {
  display: block;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-soft);
  margin-bottom: 5px;
}
.stop__title {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 7px;
}
.stop__body {
  display: block;
  font-size: 0.83rem;
  line-height: 1.52;
  color: var(--muted);
}

@media (max-width: 1050px) {
  .track {
    grid-template-columns: repeat(3, 1fr);
    gap: 34px 22px;
  }
  .track__line {
    display: none;
  }
}
@media (max-width: 680px) {
  .track {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .stop {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 16px;
    align-items: start;
  }
  .stop__pin {
    margin-bottom: 0;
    grid-row: span 3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .track__line,
  .stop {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── Five stops, not six ─────────────────────────────────────────────────────
   .track is built for six columns and draws its thread between 4% and 96%,
   which is roughly where the first and last of six pins sit. With five, the
   pin centres move, so the thread is measured from them instead: a pin is 44px
   wide at the start of its column, so its centre is 22px in, and the last
   column begins one column width from the right. Guarded above the breakpoint
   where .track collapses to three and then one, and the thread is hidden. */
@media (min-width: 1051px) {
  .track--5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .track--5 .track__line {
    left: 22px;
    right: calc((100% - 4 * 22px) / 5 - 22px);
  }
}

/* The sprite itself never renders; only <use> references do. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
/* ── Year switch ─────────────────────────────────────────────────────────── */
.years {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items: center;
  margin-top: 44px;
  padding: 30px;
  border-radius: 22px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 40px 80px -40px rgba(4, 35, 31, 0.7);
}
.years__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.years__head .seg {
  background: rgba(255, 255, 255, 0.07);
}
.years__note {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.4);
}

.band {
  display: grid;
  grid-template-columns: 1fr 96px 42px;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-size: 0.8rem;
  animation: band-in 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  animation-delay: calc(var(--i) * 55ms);
}
@keyframes band-in {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
}
.band__range {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.76rem;
}
.band__track {
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.band__track i {
  display: block;
  height: 100%;
  width: var(--w);
  max-width: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(99, 231, 127, 0.45), var(--spring));
}
.band__rate {
  text-align: right;
  color: #fff;
  font-size: 0.8rem;
}

.years__out {
  display: grid;
  gap: 12px;
}
.years__stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.years__stat span {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.55);
}
.years__stat b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.28rem;
  font-weight: 500;
  color: #fff;
}
.years__stat--net {
  background: rgba(99, 231, 127, 0.12);
  border-color: rgba(99, 231, 127, 0.32);
}
.years__stat--net span,
.years__stat--net b {
  color: var(--spring);
}
.years__delta {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
}

@media (max-width: 860px) {
  .years {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 22px;
  }
}

/* ── Door feed ───────────────────────────────────────────────────────────── */
.scan {
  display: grid;
  grid-template-columns: 8px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.88rem;
  transition:
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.scan.is-new {
  opacity: 0;
  transform: translateY(-10px);
}
.scan__pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--spring);
}
.scan.is-skip .scan__pip {
  background: rgba(255, 255, 255, 0.22);
}
.scan.is-out .scan__pip {
  background: #7fd4ff;
}
.scan__name {
  font-weight: 600;
  color: #fff;
}
.scan.is-skip .scan__name {
  color: rgba(255, 255, 255, 0.4);
}
.scan__at {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
}
.scan__tag {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--spring);
  min-width: 72px;
  text-align: right;
}
.scan.is-out .scan__tag {
  color: #7fd4ff;
}
.scan.is-skip .scan__tag {
  color: rgba(255, 255, 255, 0.3);
}

/* ── Isolation proof ─────────────────────────────────────────────────────── */
.proof {
  border-radius: 18px;
  background: #04231f;
  border: 1px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(4, 35, 31, 0.6);
}
.proof__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 15px;
  background: rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.proof__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.proof__bar b {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.42);
}
.proof__q {
  padding: 15px 18px 6px;
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.55);
}
.proof__q em {
  font-style: normal;
  color: var(--spring);
}
.proof__out {
  padding: 6px 18px 18px;
  display: grid;
  gap: 2px;
}
.proof__row,
.proof__done {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.4s ease,
    transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.proof__row.is-in,
.proof__done.is-in {
  opacity: 1;
  transform: none;
}
.proof__row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 14px;
  padding: 6px 0;
  font-size: 0.76rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.07);
}
.proof__t {
  color: rgba(255, 255, 255, 0.68);
}
.proof__m {
  color: rgba(255, 255, 255, 0.4);
}
.proof__o {
  color: var(--spring);
}
.proof__done {
  margin-top: 12px;
  padding: 10px 13px;
  border-radius: 10px;
  background: rgba(99, 231, 127, 0.12);
  border: 1px solid rgba(99, 231, 127, 0.3);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--spring);
}

@media (prefers-reduced-motion: reduce) {
  .band,
  .scan,
  .proof__row,
  .proof__done {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* product.css */
/* ===========================================================================
   Animated product mockups.
   ---------------------------------------------------------------------------
   Built rather than screenshotted. A screenshot is a dead rectangle that goes
   stale the moment the UI moves, leaks whatever data was on screen, and weighs
   400KB. These are markup: crisp at any size, animated, weightless, and they
   cannot accidentally publish somebody's salary.

   Each one lives in a browser frame, tilted a couple of degrees the way the
   category does it, and plays when it scrolls into view.
   =========================================================================== */

.product {
  background: var(--paper);
  padding: 104px 0;
  overflow: hidden;
}

.showcase + .showcase {
  margin-top: 110px;
}
/* "A working day with Trabbly." measures 553px against the 552px that 20ch
   buys at this size: one pixel over, which would wrap and leave "Trabbly."
   alone on a second line. Scoped here rather than widening every heading. */
.product .h2 {
  max-width: 22ch;
}

.showcase {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 60px;
  align-items: center;
}
.showcase--flip {
  grid-template-columns: 1.15fr 0.85fr;
}
.showcase--flip .showcase__copy {
  order: 2;
}

.showcase__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}
.showcase__tag svg {
  width: 18px;
  height: 18px;
}
.showcase__copy h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  line-height: 1.08;
  color: var(--ink);
  max-width: 16ch;
}
.showcase__copy p {
  margin-top: 16px;
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--muted);
  max-width: 42ch;
}
.showcase__list {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: grid;
  gap: 9px;
}
.showcase__list li {
  position: relative;
  padding-left: 24px;
  font-size: 0.9rem;
  color: var(--muted);
}
.showcase__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--spring);
  box-shadow: 0 0 0 3px rgba(99, 231, 127, 0.2);
}

/* ── Browser frame ───────────────────────────────────────────────────────── */
.shot {
  position: relative;
  border-radius: 16px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow:
    0 40px 80px -34px rgba(4, 35, 31, 0.28),
    0 4px 12px -4px rgba(4, 35, 31, 0.06);
  overflow: hidden;
  transform: perspective(1800px) rotateY(-4deg) rotateX(2deg) rotate(-0.6deg);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.showcase--flip .shot {
  transform: perspective(1800px) rotateY(4deg) rotateX(2deg) rotate(0.6deg);
}
.shot:hover {
  transform: perspective(1800px) rotateY(0) rotateX(0) rotate(0);
}

.shot__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.shot__bar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d9d2c4;
}
.shot__url {
  margin-left: 10px;
  flex: 1;
  max-width: 260px;
  padding: 4px 11px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.64rem;
  color: var(--muted);
}

/* ── Shared app chrome inside the frame ──────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: 52px 1fr;
  min-height: 340px;
}
.app__rail {
  background: var(--ink);
  padding: 14px 0;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 14px;
}
.app__rail .dot {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.1);
}
.app__rail .dot.is-on {
  background: var(--spring);
}
.app__body {
  padding: 16px 18px 20px;
}
.app__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.app__head b {
  font-size: 0.92rem;
  color: var(--ink);
}
/* Namespaced. This was `.who`, which collided with the `.who` section class
   added later — the section's `padding: 96px 0` landed on a 26px avatar and
   stretched it into a green bar down the whole mockup. */
.app__avatar {
  margin-left: auto;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: linear-gradient(140deg, var(--spring), var(--teal-soft));
  display: grid;
  place-items: center;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--ink);
}

/* ── Dashboard ───────────────────────────────────────────────────────────── */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 9px;
}
.tile {
  padding: 11px 12px;
  border-radius: 11px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.tile span {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.tile b {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  color: var(--ink);
  font-weight: 600;
}
.tile--live b {
  color: var(--teal);
}

.chart {
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.chart__ttl {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.chart__bars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  align-items: end;
  height: 92px;
}
/* Two rows: the bar's area, then its label. The rows have to be declared,
   because the bar's height is a percentage and a percentage of an implicit
   content-sized row resolves to nothing — which is why these bars have been
   rendering at zero height rather than rising. */
.chart__bars span {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 6px;
  justify-items: center;
  height: 100%;
  font-size: 0.56rem;
  color: var(--muted);
}
/* Drawn at full height by default; only hidden once JavaScript confirms it is
   running and can animate them back. A chart that depends on a scroll observer
   firing is a chart that is sometimes just empty. */
.chart__bars i {
  align-self: end;
  width: 100%;
  height: var(--h);
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(to top, rgba(20, 112, 106, 0.28), var(--teal));
}
.js .chart__bars i {
  height: 0;
}
.js .is-playing .chart__bars i {
  animation: rise 0.8s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * 80ms);
}
@keyframes rise {
  to {
    height: var(--h);
  }
}

/* ── People directory ────────────────────────────────────────────────────── */
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--paper);
  margin-bottom: 14px;
  font-size: 0.76rem;
  color: var(--muted);
}
.search .caret {
  display: inline-block;
  width: 1px;
  height: 13px;
  background: var(--teal);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink {
  50% {
    opacity: 0;
  }
}

.roster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}
.person {
  padding: 12px;
  border-radius: 11px;
  border: 1px solid var(--line);
  display: grid;
  justify-items: center;
  gap: 3px;
  text-align: center;
}
.js .person {
  opacity: 0;
  transform: translateY(8px);
}
.js .is-playing .person {
  animation: fade-up 0.45s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes fade-up {
  to {
    opacity: 1;
    transform: none;
  }
}
.person .pic {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 0.66rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
}
.person b {
  font-size: 0.72rem;
  color: var(--ink);
}
.person i {
  font-style: normal;
  font-size: 0.6rem;
  color: var(--muted);
}
.person .flag {
  margin-top: 4px;
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--muted);
}

/* ── Attendance ──────────────────────────────────────────────────────────── */
.att__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.att__src {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal);
}
.att__src i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--spring);
  box-shadow: 0 0 0 3px rgba(99, 231, 127, 0.25);
}
.att__tot {
  font-size: 0.68rem;
  color: var(--muted);
}

.att {
  display: grid;
  gap: 4px;
}
.att__row {
  display: grid;
  grid-template-columns: 52px 46px 46px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 9px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 0.72rem;
}
.js .att__row {
  opacity: 0;
  transform: translateX(-8px);
}
.js .is-playing .att__row {
  animation: att-in 0.42s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * 90ms);
}
@keyframes att-in {
  to {
    opacity: 1;
    transform: none;
  }
}
.att__day {
  font-weight: 700;
  color: var(--ink);
}
.att__in,
.att__out {
  font-size: 0.68rem;
  color: var(--muted);
}
.att__bar {
  height: 5px;
  border-radius: 3px;
  background: rgba(20, 112, 106, 0.1);
  overflow: hidden;
}
.att__bar i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(20, 112, 106, 0.45), var(--teal));
}
.att__h {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
/* A day on approved leave is not a short day. */
.att__row.is-off {
  background: repeating-linear-gradient(-45deg, var(--paper-2) 0 6px, transparent 6px 12px);
}
.att__row.is-off .att__h {
  color: var(--muted);
  font-weight: 500;
}
.att__row.is-now {
  border-color: rgba(99, 231, 127, 0.5);
  background: linear-gradient(110deg, rgba(99, 231, 127, 0.13), var(--paper) 60%);
}
.att__row.is-now .att__h {
  color: var(--teal);
}

/* ── Payroll run ─────────────────────────────────────────────────────────── */
.run__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.run__when {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink);
}
.run__state {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(99, 231, 127, 0.18);
  padding: 4px 10px;
  border-radius: 999px;
}

.run {
  border: 1px solid var(--line);
  border-radius: 11px;
  overflow: hidden;
}
.run__cols,
.run__row,
.run__total {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 8px;
  padding: 8px 12px;
  align-items: center;
}
.run__cols {
  background: var(--paper-2);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.run__cols span:not(:first-child),
.run__row span:not(:first-child) {
  text-align: right;
}
.run__row {
  border-top: 1px solid var(--line);
  font-size: 0.72rem;
}
.js .run__row {
  opacity: 0;
}
.js .is-playing .run__row {
  animation: fade-up 0.4s ease-out forwards;
  animation-delay: calc(var(--i) * 90ms);
}
.run__who {
  font-weight: 600;
  color: var(--ink);
}
.run__neg {
  color: #b4573f;
}
.run__net {
  font-weight: 600;
  color: var(--ink);
}
.run__total {
  grid-template-columns: 1fr auto;
  border-top: 1px solid var(--line);
  background: var(--ink);
  color: #fff;
}
.run__total span {
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.6);
}
.run__total b {
  font-size: 0.92rem;
  color: var(--spring);
  font-weight: 600;
}

.run__cta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.run__btn {
  background: var(--spring);
  color: var(--ink);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
}
.run__note {
  font-size: 0.62rem;
  color: var(--muted);
}

/* ── Leave calendar ──────────────────────────────────────────────────────── */
.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
}
.cal__head span {
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--muted);
}
.cal__dow,
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.cal__dow {
  margin-bottom: 5px;
}
.cal__dow span {
  text-align: center;
  font-size: 0.56rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.cal__grid b {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--muted);
}
.js .cal__grid b {
  opacity: 0;
  transform: scale(0.86);
}
.js .is-playing .cal__grid b {
  animation: cell-in 0.3s ease-out forwards;
  animation-delay: calc(var(--i) * 12ms);
}
@keyframes cell-in {
  to {
    opacity: 1;
    transform: none;
  }
}
.cal__grid b.is-leave {
  background: rgba(99, 231, 127, 0.24);
  border-color: rgba(20, 112, 106, 0.3);
  color: var(--ink-2);
  font-weight: 700;
}
.cal__grid b.is-sick {
  background: rgba(255, 180, 168, 0.35);
  border-color: rgba(200, 90, 70, 0.28);
  color: #8a3a2a;
  font-weight: 700;
}
.cal__grid b.is-hol {
  background: var(--ink-2);
  border-color: var(--ink-2);
  color: #fff;
  font-weight: 700;
}
.cal__grid b.is-out {
  opacity: 0.28 !important;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  font-size: 0.62rem;
  color: var(--muted);
}
.legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.legend i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .showcase,
  .showcase--flip {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .showcase--flip .showcase__copy {
    order: 0;
  }
  .shot,
  .showcase--flip .shot {
    transform: none;
  }
  .showcase + .showcase {
    margin-top: 68px;
  }
  .tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chart__bars i,
  .person,
  .cal__grid b,
  .search .caret {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .chart__bars i {
    height: var(--h);
  }
}

/* ── Phones ───────────────────────────────────────────────────────────────
   The mockups are the one thing on the site with fixed-width columns, and at
   360px the .wrap leaves about 215px inside the app body. Four columns of
   monospaced currency need roughly 55px each plus gaps - about 60px more than
   exists. Rather than let the page scroll sideways, the mockups tighten. */
@media (max-width: 620px) {
  .app {
    grid-template-columns: 44px 1fr;
    min-height: 0;
  }
  .app__body {
    padding: 14px;
  }

  /* Three across becomes two: at 66px a card is narrower than the name on it. */
  .roster {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Deductions is the column to lose. Gross in and net out still tell the
     whole story, and the missing figure is the difference between them. */
  .run__cols,
  .run__row,
  .run__total {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 6px;
    padding: 8px 10px;
    font-size: 0.66rem;
  }
  .run__cols span:nth-child(3),
  .run__row span:nth-child(3) {
    display: none;
  }

  /* Clock-in and clock-out keep their own columns; the bar gives up its
     minimum so the row can never be the widest thing on the page. */
  .att__row {
    grid-template-columns: 44px 42px 42px minmax(0, 1fr);
    gap: 7px;
    padding: 8px;
    font-size: 0.66rem;
  }
  .att__row > :last-child {
    display: none;
  }

  .run__cta {
    flex-wrap: wrap;
    gap: 8px;
  }
  .run__note {
    font-size: 0.62rem;
  }
}

/* leave.css */
/* ===========================================================================
   Leave and absence.
   ---------------------------------------------------------------------------
   The page has one argument: entitlement is a country's law before it is your
   policy, and the product knows the difference. The two components built here
   are the charged-days calendar, which shows what a request actually costs,
   and the sick-pay comparison, which is the thing no competitor page prints
   because most of them only operate in one country.
   =========================================================================== */

/* ── Charged days ────────────────────────────────────────────────────────────
   A week off is not a week charged. The span is drawn across the request and
   the days inside it that are not working days are struck through, so the
   arithmetic is visible rather than asserted. */
.charge {
  /* Capped. Seven square cells across a half-width hero column still makes a
     calendar the size of a wall planner; at this width a cell lands near 48px,
     which is a date you can read and not a button you could sit on. */
  max-width: 420px;
  margin-left: auto;
  padding: 18px 20px 16px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 34px 70px -34px rgba(4, 35, 31, 0.5);
}
.charge__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.charge__month {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ink);
}
.charge__who {
  font-size: 0.72rem;
  color: var(--muted);
}

.charge__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
.charge__dow span {
  text-align: center;
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.charge__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.charge__grid b {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 0.64rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}
.charge__grid b.is-pad {
  background: transparent;
  border-color: transparent;
}
/* Inside the request. */
.charge__grid b.is-span {
  background: rgba(99, 231, 127, 0.26);
  border-color: rgba(20, 112, 106, 0.34);
  color: var(--ink-2);
  font-weight: 700;
}
/* Inside the request but not chargeable. The rule through the number is the
   whole point: it is the same span, and these are the days you keep. */
.charge__grid b.is-free {
  background: var(--paper-2);
  border-style: dashed;
  color: var(--muted);
  font-weight: 500;
}
.charge__grid b.is-free::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  height: 1.5px;
  border-radius: 2px;
  background: rgba(95, 111, 107, 0.65);
}
.charge__grid b.is-hol {
  border-color: rgba(180, 87, 63, 0.4);
}

.charge__sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted);
}
.charge__sum em {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.charge__sum i {
  width: 11px;
  height: 11px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--paper-2);
}
.charge__sum em.is-on i {
  background: rgba(99, 231, 127, 0.4);
  border-color: rgba(20, 112, 106, 0.4);
}
.charge__out {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}
.charge__out b {
  color: var(--teal);
}

@media (max-width: 940px) {
  .charge {
    margin-left: 0;
  }
}
@media (max-width: 420px) {
  .charge {
    padding: 16px 14px 14px;
  }
  .charge__grid,
  .charge__dow {
    gap: 4px;
  }
}

/* ── Who pays ────────────────────────────────────────────────────────────────
   Three countries, the same question, three different answers. Each stage of a
   sick absence is a row, because the thing people get wrong is that it changes
   partway through. */
.pays {
  background: var(--paper-2);
  padding: 104px 0;
}
.pays__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 46px;
}
.pay {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 20px;
  border-radius: var(--r);
  background: #fff;
  border: 1px solid var(--line);
}
.pay__where {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 12px;
}
.pay__lead {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 18px;
}
.pay__row {
  padding: 13px 0;
  border-top: 1px solid var(--line);
}
.pay__when {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--ink);
  font-weight: 600;
}
.pay__when span {
  font-family: var(--mono);
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--muted);
}
.pay__bar {
  height: 6px;
  margin-top: 8px;
  border-radius: 3px;
  background: rgba(20, 112, 106, 0.1);
  overflow: hidden;
}
.pay__bar i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(20, 112, 106, 0.5), var(--teal));
}
.pay__bar--si i {
  background: linear-gradient(90deg, rgba(127, 212, 255, 0.45), #7fd4ff);
}
.pay__who {
  margin-top: 7px;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--muted);
}
.pay__note {
  /* Pushed to the bottom so the three notes sit on one line across the row,
     however many stages a country's rule happens to have. */
  margin: 16px 0 0;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
}
.pays__fine {
  margin: 28px 0 0;
  font-size: 0.76rem;
  color: var(--muted);
}

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