/* ===========================================================================
   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: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

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

/* ── Reset ───────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
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;
  font-size: clamp(2rem, 4.4vw, 3.35rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 20ch;
}
.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: 800;
  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: 800;
  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: 800;
  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;
  align-items: start;
}
.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: 800;
}
.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: 800;
  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 {
  display: grid;
  gap: 6px;
  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;
  font-size: 0.94rem;
  font-weight: 500;
  transition:
    border-color 0.18s,
    background 0.18s;
}
.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;
}
.form__msg {
  font-size: 0.85rem;
  text-align: center;
  min-height: 1.2em;
}
.form__msg.is-ok {
  color: var(--spring);
}
.form__msg.is-bad {
  color: #ffb4a8;
}
.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;
  font-size: clamp(2.3rem, 5.2vw, 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;
}

.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: 800;
  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;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
  margin-top: 60px;
}
.split--tight {
  gap: 44px;
}
@media (max-width: 940px) {
  .split {
    grid-template-columns: 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;
  }
  .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;
  }
}

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

.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 button {
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}
.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);
}
.pick__list li {
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
}
.pick__list li:hover,
.pick__list li.is-active {
  background: rgba(99, 231, 127, 0.16);
  color: #fff;
}

/* ── 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 ────────────────────────────────────────────────────────────────── */
.done {
  text-align: center;
}
.done__tick {
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(99, 231, 127, 0.18);
  color: var(--spring);
  font-size: 1.4rem;
}
.done__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.7rem;
  color: #fff;
  margin: 0 0 8px;
}
.done__text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 40ch;
  margin-inline: auto;
}