:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-light: #f6f8fb;
  --text: #0e1626;
  --muted: #5b6779;
  --accent: #0f7db5;
  --accent-2: #12916b;
  --accent-3: #c96a17;
  --accent-4: #6f52c9;
  --border: rgba(14,22,38,.13);
  --shadow: 0 18px 50px rgba(14,22,38,.10);
  --ink: #0e1626;
  --surface: rgba(255,255,255,.78);
  --surface-2: rgba(255,255,255,.55);
  --tint: rgba(14,22,38,.04);
  --tint-2: rgba(14,22,38,.07);
  --aurora-1: 43,184,255;
  --aurora-2: 46,214,150;
  --aurora-3: 255,157,82;
  --aurora-4: 150,110,255;
  /* Set by JS (see end-of-body script) to the actual vertical-scrollbar width.
     Full-bleed elements use calc(100vw - var(--sbw)) instead of a bare 100vw,
     because 100vw includes the scrollbar's width on non-overlay-scrollbar
     systems (most Windows/Linux browsers), which silently produces a page
     wider than the visible viewport and a horizontal scrollbar. Defaults to
     0px until the script runs, which is a harmless one-frame difference. */
  --sbw: 0px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* No overflow-x clip here at desktop widths: it silently breaks position:sticky
     (it collapses the sticky ancestor's scroll height), which the homepage
     assembly scene needs. Full-bleed heroes/footers are clipped locally instead.
     Below 840px the assembly is static (no sticky), so the root clip is restored
     in the mobile block to catch the off-canvas nav — see further down. */
}

body {
  margin: 0;
  /* overflow-x clip removed from body too; see the note on html above. */
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16.5px;
  color: var(--text);
  background:
    radial-gradient(circle at top left, rgba(var(--aurora-1), .10), transparent 34rem),
    radial-gradient(circle at top right, rgba(46,214,150,.08), transparent 28rem),
    radial-gradient(circle at 50% 85%, rgba(150,110,255,.06), transparent 32rem),
    var(--bg);
  line-height: 1.6;
}

a { color: inherit; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.3rem 1.2rem;
  position: relative;
  z-index: 50;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -.03em;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.brand-text { font-size: 1.15rem; }

.nav {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  color: var(--muted);
  font-size: .95rem;
}

.nav > a {
  text-decoration: none;
}

.nav > a:hover { color: var(--text); }

.nav-item {
  position: relative;
}

.nav-item > a {
  text-decoration: none;
  padding: .4rem 0;
  display: inline-block;
}

.nav-item > a:hover { color: var(--text); }

.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding-top: .5rem;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
}

.nav-dropdown-inner {
  width: max-content;
  max-width: 280px;
  padding: .5rem;
  border-radius: .9rem;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.nav-item.open .nav-dropdown,
.nav-item:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown a {
  padding: .6rem .75rem;
  border-radius: .6rem;
  font-size: .87rem;
  color: var(--muted);
  text-decoration: none;
  white-space: normal;
  line-height: 1.3;
}

.nav-dropdown a:hover {
  background: var(--tint-2);
  color: var(--text);
}

.nav-cta {
  padding: .62rem .9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text) !important;
  background: var(--tint-2);
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
  gap: 2rem;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 5rem 1.2rem 3.5rem;
  position: relative;
  /* No local overflow clip: .hero-aurora now full-bleeds via the same
     100vw + translateX trick as .page-aurora (see that rule's note).
     Residual horizontal bleed is caught by the html/body overflow-x:clip
     in the <=840px block, matching .page-hero's approach. */
}

.hero-decor {
  position: absolute;
  top: -3rem;
  right: -2rem;
  width: 26rem;
  height: 26rem;
  pointer-events: none;
  z-index: 1;
  opacity: .55;
  animation: floatY 9s ease-in-out infinite;
}

.hero-copy,
.hero-card {
  position: relative;
  z-index: 2;
}

.eyebrow {
  margin: 0 0 .85rem;
  color: var(--accent-2);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .78rem;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  max-width: 850px;
  margin-bottom: 1.2rem;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: .96;
  letter-spacing: -.07em;
}

h2 {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.04;
  letter-spacing: -.055em;
}

h3 {
  margin-bottom: .75rem;
  font-size: 1.3rem;
  letter-spacing: -.02em;
}

.lead {
  max-width: 690px;
  color: var(--muted);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
  margin-top: 2rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: .85rem 1.05rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
}

.primary {
  color: #ffffff;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.secondary {
  border: 1px solid var(--border);
  background: var(--tint-2);
}

.hero-card, .card, .callout {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  position: relative;
  transition: border-color .22s ease, box-shadow .22s ease;
}

/* Shared hover treatment, matching the homepage "Who it is for" cards.
   Border colour and shadow only: .reveal.is-visible sets `transform: none` at
   equal specificity and later in the file, so a translateY lift here would be
   silently dropped on any .reveal element and only fire on non-reveal boxes. */
.hero-card:hover, .card:hover, .callout:hover, .faq-item:hover {
  border-color: rgba(15,125,181, .45);
  box-shadow: 0 20px 46px rgba(0,0,0,.4);
}

.hero-card {
  display: grid;
  gap: 1rem;
  padding: 1rem;
  border-radius: 1.7rem;
}

.metric {
  padding: 1rem 1.1rem;
  border-radius: 1.2rem;
  background: var(--tint);
}

/* Float rather than flex, so the icon sits with the heading and the
   description runs full width beneath it, matching every other card. */
.metric > .icon-wrap-sm {
  float: left;
  margin: 0 .6rem .1rem 0;
}

.metric-copy strong {
  display: flex;
  align-items: center;
  min-height: 2.1rem;
}

.metric-copy p {
  clear: left;
}

.metric > .icon-wrap-sm {
  flex-shrink: 0;
  margin-bottom: 0;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: .6rem;
}

.metric > .icon-wrap-sm svg {
  width: 1.1rem;
  height: 1.1rem;
}

.metric strong {
  display: block;
  margin-bottom: .2rem;
  font-size: 1.05rem;
}

.metric p, .card p, .steps p, .callout p, .site-footer {
  color: var(--muted);
}

.section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 4.5rem 1.2rem;
}

.section-heading {
  max-width: 760px;
  margin-bottom: 2rem;
}

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

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

.grid-4col {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .grid-4col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .grid-4col { grid-template-columns: 1fr; }
}

.card {
  min-height: 15rem;
  padding: 1.5rem;
  border-radius: 1.35rem;
}

.split {
  display: grid;
  grid-template-columns: minmax(280px, 1.4fr) minmax(220px, .85fr);
  gap: 2rem;
  align-items: start;
}

.split > .card {
  max-width: 380px;
  justify-self: end;
}

.steps {
  display: grid;
  gap: 1rem;
}

.steps > div {
  padding: 1.2rem;
  border-left: 3px solid var(--accent);
  background: var(--tint);
  border-radius: .9rem;
}

.callout {
  border-radius: 1.4rem;
  padding: clamp(1.5rem, 3.5vw, 2.4rem);
  margin-bottom: 3rem;
}

/* The closing CTA was inheriting the full page-heading h2 scale, which made
   every page end by shouting. Kept deliberately smaller than a section heading. */
.callout h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  letter-spacing: -.03em;
  margin-bottom: .6rem;
}

.callout .eyebrow {
  margin-bottom: .5rem;
}

.callout .icon-wrap {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: .8rem;
  margin-bottom: .75rem;
}

.callout .icon-wrap svg {
  width: 1.25rem;
  height: 1.25rem;
}

.callout .button {
  min-height: 2.6rem;
  padding: .6rem .95rem;
  font-size: .92rem;
  margin-top: .4rem;
}

.callout p {
  max-width: 720px;
  font-size: .98rem;
}

/* ---- Site footer ----
   Four stacked zones: brand + link columns, then Acknowledgement of Country,
   then the legal line. */
.site-footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 3.5rem 1.2rem 2.5rem;
  border-top: 1px solid var(--border);
  font-size: .92rem;
  position: relative;
  /* No local overflow clip: would clip the full-bleed .footer-aurora back to
     this 1180px column and undo the 100vw bleed (see .footer-aurora note
     below). Residual horizontal bleed is caught by the html/body
     overflow-x:clip in the <=840px block, matching .page-hero's approach. */
}

/* Reuses .page-aurora (the footer carries both classes), overriding only the
   geometry: full height of the footer rather than a fixed 32rem drop from -7rem.
   Compound selector is deliberate: .page-aurora is defined later in the file, so
   a bare .footer-aurora would lose on source order at equal specificity.
   The 100vw + translateX trick still full-bleeds it, so no overflow:hidden here,
   which would clip it back to the 1180px column and undo the bleed. */
.page-aurora.footer-aurora {
  top: 0;
  height: 100%;
}

/* The blob offsets are tuned for the 32rem-tall page hero. Re-centring each blob
   on the footer's midline (calc(50% - half its own height)) keeps the saturated
   core in view whatever the footer's height. Vertical only, so the horizontal
   spread and the drift animations are untouched. */
.footer-aurora .b1 { top: calc(50% - 16rem); }
.footer-aurora .b2 { top: calc(50% - 14rem); }
.footer-aurora .b3 { top: calc(50% - 15rem); }
.footer-aurora .b4 { top: calc(50% - 13rem); }
.footer-aurora .b5 { top: calc(50% - 12rem); bottom: auto; }

.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 3.5fr);
  gap: 2.5rem;
  position: relative;
  z-index: 1;
}

.footer-brand .brand {
  color: var(--ink);
}

.site-footer .footer-tagline {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.5;
  max-width: 24ch;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.6rem 1.2rem;
}

.footer-col h2 {
  margin: 0 0 .9rem;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
}

.footer-col a {
  display: block;
  margin-bottom: .55rem;
  color: var(--ink);
  text-decoration: none;
  font-size: .865rem;
  line-height: 1.4;
  transition: color .18s ease;
}

.footer-col a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.footer-ack {
  position: relative;
  z-index: 1;
  margin-top: 3rem;
  padding-top: 1.9rem;
  border-top: 1px solid var(--border);
  text-align: center;
}

.footer-ack h2 {
  margin: 0 0 .75rem;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
}

.site-footer .footer-ack p {
  margin: 0 auto;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.65;
  max-width: 105ch;
}

/* ABN, email and copyright now sit under the footer logo rather than in a
   separate legal bar, to reclaim vertical space at the bottom of every page. */
.footer-brand-meta {
  margin-top: 1.3rem;
  display: grid;
  gap: .4rem;
  font-size: .85rem;
  color: var(--muted);
}

.footer-brand-meta a {
  color: var(--muted);
  text-decoration: none;
}

.footer-brand-meta a:hover {
  color: var(--accent);
  text-decoration: underline;
}

@media (max-width: 980px) {
  .footer-main { grid-template-columns: 1fr; gap: 2rem; }
  .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer .footer-tagline { max-width: none; }
}

@media (max-width: 620px) {
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.site-footer p { margin: 0; }

.feature-list {
  list-style: none;
  padding: 0;
  margin: 1.2rem 0 0;
  display: grid;
  gap: .65rem;
}

.feature-list li {
  padding-left: 1.6rem;
  position: relative;
  color: var(--muted);
}

.feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 800;
}

/* Neutral marker for "not a fit" lists, where an affirmative tick would read wrong */
.feature-list-plain li::before {
  content: "–";
  color: var(--accent-3);
}

.backlink {
  display: inline-block;
  margin-bottom: 1.6rem;
  color: var(--muted);
  text-decoration: none;
  font-size: .9rem;
}

.backlink:hover { color: var(--text); }

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.2rem;
}

.nav-group {
  display: block;
  padding: .55rem .75rem .3rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-2);
  opacity: .75;
  pointer-events: none;
}

.nav-group:not(:first-child) {
  margin-top: .35rem;
  border-top: 1px solid var(--border);
  padding-top: .65rem;
}

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

.fit-card {
  border: 1px solid var(--border);
  border-radius: 1.35rem;
  padding: 1.6rem;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
}

.fit-card.yes { border-color: rgba(18,145,107, .32); }
.fit-card.no { border-color: rgba(201,106,23, .28); }

.fit-list {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: grid;
  gap: .6rem;
}

.fit-list li {
  position: relative;
  padding-left: 1.7rem;
  color: var(--muted);
  font-size: .95rem;
}

.fit-card.yes .fit-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent-2);
  font-weight: 800;
}

.fit-card.no .fit-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent-3);
  font-weight: 800;
}

.phase-table th:first-child { white-space: normal; }

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.6rem;
}

.chip-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--tint);
  color: var(--text);
  text-decoration: none;
  font-size: .9rem;
  font-weight: 700;
  transition: border-color .18s ease, transform .18s ease, background-color .18s ease;
}

.chip-cta:hover {
  transform: translateY(-2px);
  background: var(--tint);
}

.chip-cta:nth-child(1):hover { border-color: rgba(15,125,181, .5); }
.chip-cta:nth-child(2):hover { border-color: rgba(111,82,201, .5); }
.chip-cta:nth-child(3):hover { border-color: rgba(201,106,23, .5); }

.chip-cta svg { width: 1rem; height: 1rem; }

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

.tag {
  padding: .35rem .8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--tint);
  font-size: .78rem;
  color: var(--muted);
}

.tag-row .tag:nth-child(4n+2) {
  border-color: rgba(18,145,107, .3);
  color: var(--accent-2);
}

.tag-row .tag:nth-child(4n+3) {
  border-color: rgba(201,106,23, .3);
  color: var(--accent-3);
}

.tag-row .tag:nth-child(4n) {
  border-color: rgba(111,82,201, .3);
  color: var(--accent-4);
}

.page-hero {
  max-width: 900px;
  margin: 0 auto;
  padding: 4rem 1.2rem 1rem;
  position: relative;
  /* No overflow clip here: overflow-x:clip coerces overflow-y to clip too, which
     cut the .page-aurora off at the hero's top edge and stopped it reaching up
     behind the header. The aurora is 100vw-centred, which only bleeds by the
     scrollbar width; that residual horizontal bleed is caught by the html/body
     overflow-x:clip in the <=840px block, and desktop has no h-scroll from it. */
}

/* Full-width animated colour field behind every inner page hero.
   Breaks out of the 900px column via the 100vw + translateX trick,
   which is safe because html/body clip horizontal overflow. */
.page-aurora {
  position: absolute;
  top: -11rem;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw - var(--sbw));
  height: 36rem;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  filter: blur(60px) saturate(1.05);
  opacity: .5;
}

.page-aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}

.page-aurora .b1 {
  width: 38rem; height: 38rem;
  top: -13rem; left: -8rem;
  background: radial-gradient(circle, rgba(var(--aurora-1), 1), rgba(var(--aurora-1), .4) 46%, transparent 70%);
  animation: auroraDrift 3.67s ease-in-out infinite;
}

.page-aurora .b2 {
  width: 30rem; height: 30rem;
  top: -9rem; left: 27%;
  background: radial-gradient(circle, rgba(var(--aurora-2), .95), rgba(var(--aurora-2), .3) 45%, transparent 70%);
  animation: auroraDriftAlt 4.33s ease-in-out infinite .6s;
}

.page-aurora .b3 {
  width: 30rem; height: 30rem;
  top: -9rem; right: 27%;
  background: radial-gradient(circle, rgba(var(--aurora-4), .95), rgba(var(--aurora-4), .32) 45%, transparent 70%);
  animation: auroraDriftWide 5.0s ease-in-out infinite 1.2s;
}

.page-aurora .b4 {
  width: 40rem; height: 40rem;
  top: -13rem; right: -8rem;
  background: radial-gradient(circle, rgba(var(--aurora-4), .98), rgba(var(--aurora-4), .38) 46%, transparent 70%);
  animation: auroraDriftAlt 4.0s ease-in-out infinite .3s;
}

.page-aurora .b5 {
  width: 26rem; height: 26rem;
  bottom: -8rem; left: 42%;
  background: radial-gradient(circle, rgba(var(--aurora-1), .8), rgba(var(--aurora-1), .24) 45%, transparent 70%);
  animation: auroraDrift 4.67s ease-in-out infinite .9s;
}

/* Colour variants so each page reads differently */
.aurora-v2 .b1 { background: radial-gradient(circle, rgba(var(--aurora-4), 1), rgba(var(--aurora-4), .34) 45%, transparent 70%); }
.aurora-v2 .b2 { background: radial-gradient(circle, rgba(var(--aurora-1), .95), rgba(var(--aurora-1), .32) 45%, transparent 70%); }
.aurora-v2 .b3 { background: radial-gradient(circle, rgba(var(--aurora-3), .92), rgba(var(--aurora-3), .3) 45%, transparent 70%); }
.aurora-v2 .b4 { background: radial-gradient(circle, rgba(var(--aurora-2), .92), rgba(var(--aurora-2), .3) 45%, transparent 70%); }
.aurora-v2 .b5 { background: radial-gradient(circle, rgba(var(--aurora-4), .8), rgba(var(--aurora-4), .24) 45%, transparent 70%); }

.aurora-v3 .b1 { background: radial-gradient(circle, rgba(var(--aurora-3), .98), rgba(var(--aurora-3), .32) 45%, transparent 70%); }
.aurora-v3 .b2 { background: radial-gradient(circle, rgba(var(--aurora-4), .95), rgba(var(--aurora-4), .32) 45%, transparent 70%); }
.aurora-v3 .b3 { background: radial-gradient(circle, rgba(var(--aurora-1), 1), rgba(var(--aurora-1), .34) 45%, transparent 70%); }
.aurora-v3 .b4 { background: radial-gradient(circle, rgba(var(--aurora-2), .9), rgba(var(--aurora-2), .28) 45%, transparent 70%); }
.aurora-v3 .b5 { background: radial-gradient(circle, rgba(var(--aurora-3), .8), rgba(var(--aurora-3), .24) 45%, transparent 70%); }

.aurora-v4 .b1 { background: radial-gradient(circle, rgba(var(--aurora-2), .98), rgba(var(--aurora-2), .32) 45%, transparent 70%); }
.aurora-v4 .b2 { background: radial-gradient(circle, rgba(var(--aurora-3), .92), rgba(var(--aurora-3), .3) 45%, transparent 70%); }
.aurora-v4 .b3 { background: radial-gradient(circle, rgba(var(--aurora-1), 1), rgba(var(--aurora-1), .34) 45%, transparent 70%); }
.aurora-v4 .b4 { background: radial-gradient(circle, rgba(var(--aurora-4), .92), rgba(var(--aurora-4), .3) 45%, transparent 70%); }
.aurora-v4 .b5 { background: radial-gradient(circle, rgba(var(--aurora-2), .8), rgba(var(--aurora-2), .24) 45%, transparent 70%); }

/* Must exclude .page-aurora here. It has the same specificity as this
   selector, so a blanket `> *` would override its position: absolute,
   drop it into normal flow, and push the hero content down by its height. */
.page-hero > *:not(.page-aurora) {
  position: relative;
  z-index: 1;
}

.card-link {
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.7,.2,1), border-color .22s ease, box-shadow .22s ease;
}

.card-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 50% 0%, rgba(15,125,181, .12), transparent 62%);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}

.card-link:hover {
  transform: translateY(-5px);
  border-color: rgba(15,125,181, .45);
  box-shadow: 0 20px 46px rgba(0,0,0,.4);
}

.card-link:hover::after {
  opacity: 1;
}

.card-link.mint::after {
  background: radial-gradient(120% 90% at 50% 0%, rgba(18,145,107, .12), transparent 62%);
}

.card-link.amber::after {
  background: radial-gradient(120% 90% at 50% 0%, rgba(201,106,23, .12), transparent 62%);
}

.card-link.violet::after {
  background: radial-gradient(120% 90% at 50% 0%, rgba(111,82,201, .12), transparent 62%);
}

.card-link .icon-wrap {
  transition: transform .22s cubic-bezier(.2,.7,.2,1);
}

.card-link:hover .icon-wrap {
  transform: scale(1.08) rotate(-4deg);
}

.card-link .more {
  display: inline-block;
  margin-top: 1rem;
  color: var(--accent);
  font-weight: 700;
  font-size: .9rem;
}

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

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

.table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border);
  border-radius: 1rem;
  margin-top: 2rem;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

.compare-table th, .compare-table td {
  padding: 1rem 1.2rem;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--border);
  font-size: .95rem;
}

.compare-table thead th {
  color: var(--accent-2);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: var(--tint);
  border-top: none;
}

.compare-table thead th:first-child { border-left: none; }
.compare-table thead th:last-child { border-right: none; }

.compare-table tbody th {
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
  border-left: none;
  background: var(--tint);
}

.compare-table tbody td:last-child { border-right: none; }

.compare-table tbody tr:nth-child(even) td,
.compare-table tbody tr:nth-child(even) th {
  background: var(--tint);
}

.compare-table td {
  color: var(--muted);
}

/* The advantage cue was colour alone (grey vs black), which is far too subtle
   to scan and invisible to anyone with low contrast sensitivity. Now it carries
   a tint, a tick and weight, so it survives a glance and does not rely on colour. */
.compare-table td.advantage {
  color: var(--text);
  font-weight: 500;
  background: rgba(18,145,107,.09);
  padding-left: 2.5rem;
  position: relative;
}

.compare-table tbody tr:nth-child(even) td.advantage {
  background: rgba(18,145,107,.13);
}

.compare-table td.advantage::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1.05rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--accent-2);
}

.compare-table td.advantage::after {
  content: "";
  position: absolute;
  left: 1.28rem;
  top: 1.4rem;
  width: .5rem;
  height: .26rem;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg);
}

.note {
  color: var(--muted);
  font-size: .9rem;
  margin-top: 1rem;
}

.section-break {
  margin-top: 2.5rem;
}

.icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  margin-bottom: 1rem;
  color: var(--accent);
  background: rgba(15,125,181, .14);
  border: 1px solid rgba(15,125,181, .22);
}

.icon-wrap svg {
  width: 1.6rem;
  height: 1.6rem;
}

.icon-wrap-sm {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .8rem;
  margin-bottom: .8rem;
}

/* Semantic accent-color modifiers applied per icon type across the site */
.icon-wrap.mint {
  color: var(--accent-2);
  background: rgba(18,145,107, .16);
  border-color: rgba(18,145,107, .28);
}

.icon-wrap.amber {
  color: var(--accent-3);
  background: rgba(201,106,23, .16);
  border-color: rgba(201,106,23, .28);
}

.icon-wrap.violet {
  color: var(--accent-4);
  background: rgba(111,82,201, .16);
  border-color: rgba(111,82,201, .28);
}

.card-link.mint:hover {
  border-color: rgba(18,145,107, .45);
}

.card-link.amber:hover {
  border-color: rgba(201,106,23, .45);
}

.card-link.violet:hover {
  border-color: rgba(111,82,201, .45);
}

/* ---- Icon-derived hover tint ----
   .card-link carries its accent as a class on the box (.card-link.mint), but every
   other box carries it only on the icon, which is why plain cards fell back to blue
   while "Not-for-profits" went green. Deriving the tint from the icon covers both.
   Direct child only (`> .icon-wrap`): many cards have further icons inside feature
   lists, and those must not drive the colour of the whole box. Verified against the
   markup: every box has exactly one direct-child icon, so there is no ambiguity. */
.card::after,
.callout::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 50% 0%, rgba(15,125,181, .12), transparent 62%);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}

.card:hover::after,
.callout:hover::after {
  opacity: 1;
}

.card:has(> .icon-wrap.mint):hover,
.callout:has(> .icon-wrap.mint):hover {
  border-color: rgba(18,145,107, .45);
}

.card:has(> .icon-wrap.mint)::after,
.callout:has(> .icon-wrap.mint)::after {
  background: radial-gradient(120% 90% at 50% 0%, rgba(18,145,107, .12), transparent 62%);
}

.card:has(> .icon-wrap.amber):hover,
.callout:has(> .icon-wrap.amber):hover {
  border-color: rgba(201,106,23, .45);
}

.card:has(> .icon-wrap.amber)::after,
.callout:has(> .icon-wrap.amber)::after {
  background: radial-gradient(120% 90% at 50% 0%, rgba(201,106,23, .12), transparent 62%);
}

.card:has(> .icon-wrap.violet):hover,
.callout:has(> .icon-wrap.violet):hover {
  border-color: rgba(111,82,201, .45);
}

.card:has(> .icon-wrap.violet)::after,
.callout:has(> .icon-wrap.violet)::after {
  background: radial-gradient(120% 90% at 50% 0%, rgba(111,82,201, .12), transparent 62%);
}

.steps > div.mint {
  border-left-color: var(--accent-2);
}

.steps > div.amber {
  border-left-color: var(--accent-3);
}

.steps > div.violet {
  border-left-color: var(--accent-4);
}

.icon-wrap-sm svg {
  width: 1.3rem;
  height: 1.3rem;
}

.page-hero .icon-wrap {
  margin-bottom: 1.4rem;
}

.steps > div {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.steps .icon-wrap-sm {
  flex-shrink: 0;
  margin-bottom: 0;
  margin-top: .15rem;
}

.steps-copy strong {
  display: block;
  margin-bottom: .35rem;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.1rem 1.3rem;
  margin-bottom: .8rem;
  background: var(--tint);
  transition: border-color .22s ease, box-shadow .22s ease;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

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

.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform .15s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin-top: .9rem;
  color: var(--muted);
}

.faq-item p a { color: var(--accent); }

.nav-toggle {
  display: none;
}

/* ---- Mobile hamburger button ---- */
.nav-burger {
  display: none;
  position: relative;
  z-index: 320;
  width: 2.9rem;
  height: 2.9rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: .9rem;
  background: var(--tint-2);
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.burger-box {
  position: relative;
  display: block;
  width: 1.15rem;
  height: .75rem;
}

.burger-lines,
.burger-lines::before,
.burger-lines::after {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .28s ease, opacity .18s ease, background-color .28s ease;
}

.burger-lines {
  top: 50%;
  transform: translateY(-50%);
}

.burger-lines::before {
  content: "";
  top: -.37rem;
}

.burger-lines::after {
  content: "";
  top: .37rem;
}

body.nav-open .burger-lines {
  background: transparent;
}

body.nav-open .burger-lines::before {
  top: 0;
  transform: rotate(45deg);
}

body.nav-open .burger-lines::after {
  top: 0;
  transform: rotate(-45deg);
}

.nav-backdrop {
  display: none;
}

/* ---- Animated gradient + reveal motion ---- */
@keyframes auroraDrift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  33%  { transform: translate3d(-10%, 7%, 0) scale(1.22); }
  66%  { transform: translate3d(7%, -5%, 0) scale(.92); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes auroraDriftAlt {
  0%   { transform: translate3d(0, 0, 0) scale(1.08); }
  33%  { transform: translate3d(13%, -9%, 0) scale(.9); }
  66%  { transform: translate3d(-8%, 8%, 0) scale(1.2); }
  100% { transform: translate3d(0, 0, 0) scale(1.08); }
}

@keyframes auroraDriftWide {
  0%   { transform: translate3d(0, 0, 0) scale(.95); }
  50%  { transform: translate3d(-14%, -8%, 0) scale(1.25); }
  100% { transform: translate3d(0, 0, 0) scale(.95); }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes floatY {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}

/* border-color/box-shadow are carried here as well as on .card: this rule has the
   same specificity as .card but sits later, so a shorter list would silently strip
   the hover transition from every box that also carries .reveal (i.e. most of them). */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .8s cubic-bezier(.16,.84,.28,1) .12s, transform .8s cubic-bezier(.16,.84,.28,1) .12s, border-color .22s ease, box-shadow .22s ease;
}

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

/* Full shorthand rather than `transition-delay`, which would otherwise apply the
   stagger delay to the hover transition too and make every box feel laggy. */
.reveal-d1 { transition: opacity .8s cubic-bezier(.16,.84,.28,1) .22s, transform .8s cubic-bezier(.16,.84,.28,1) .22s, border-color .22s ease, box-shadow .22s ease; }
.reveal-d2 { transition: opacity .8s cubic-bezier(.16,.84,.28,1) .32s, transform .8s cubic-bezier(.16,.84,.28,1) .32s, border-color .22s ease, box-shadow .22s ease; }
.reveal-d3 { transition: opacity .8s cubic-bezier(.16,.84,.28,1) .42s, transform .8s cubic-bezier(.16,.84,.28,1) .42s, border-color .22s ease, box-shadow .22s ease; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-aurora span,
  .page-aurora span,
  .gradient-text,
  .hero-decor { animation: none !important; }
}

/* ---- Gradient headline accent ---- */
.gradient-text {
  background: linear-gradient(100deg, var(--accent) 0%, var(--accent-2) 34%, var(--accent-4) 68%, var(--accent-3) 100%);
  background-size: 250% 250%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientShift 10s ease-in-out infinite;
}

/* ---- Animated aurora field behind the hero ---- */
.hero-aurora {
  position: absolute;
  top: -18%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw - var(--sbw));
  height: 130%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  filter: blur(64px) saturate(1.05);
  opacity: .5;
}

.hero-aurora span {
  position: absolute;
  display: block;
  border-radius: 50%;
  will-change: transform;
}

.hero-aurora .a1 {
  width: 34rem; height: 34rem;
  top: -8rem; left: -6rem;
  background: radial-gradient(circle, rgba(var(--aurora-1), 1), rgba(var(--aurora-1), .35) 45%, transparent 70%);
  animation: auroraDrift 3.33s ease-in-out infinite;
}

.hero-aurora .a2 {
  width: 30rem; height: 30rem;
  top: -4rem; right: -4rem;
  background: radial-gradient(circle, rgba(var(--aurora-2), .95), rgba(var(--aurora-2), .3) 45%, transparent 70%);
  animation: auroraDriftAlt 4.0s ease-in-out infinite;
}

.hero-aurora .a3 {
  width: 26rem; height: 26rem;
  bottom: -10rem; left: 32%;
  background: radial-gradient(circle, rgba(var(--aurora-4), .95), rgba(var(--aurora-4), .3) 45%, transparent 70%);
  animation: auroraDriftWide 4.67s ease-in-out infinite 1s;
}

.hero-aurora .a4 {
  width: 22rem; height: 22rem;
  bottom: -6rem; right: 12%;
  background: radial-gradient(circle, rgba(var(--aurora-3), .9), rgba(var(--aurora-3), .28) 45%, transparent 70%);
  animation: auroraDriftAlt 3.67s ease-in-out infinite .5s;
}

/* ---- Proof band ---- */
/* The hero aurora is absolutely positioned and 130% tall, so it bleeds ~12% below
   the hero and over this band. While .reveal's transform is non-none it creates a
   stacking context and the band paints above the aurora; the moment the transform
   resolves to none that context is destroyed and the aurora paints back over the
   top. That is the "goes opaque, then lets the colour through" flicker. Holding an
   explicit z-index keeps the band above the aurora at every point. */
.proof-band {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.2rem 1rem;
}

.proof-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: 1.4rem;
  overflow: hidden;
  background: var(--border);
}

.proof-item {
  padding: 1.6rem 1.2rem;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  text-align: center;
}

.proof-item strong {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.3rem);
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: .45rem;
  background: linear-gradient(120deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.proof-item:nth-child(2) strong {
  background: linear-gradient(120deg, var(--accent-2), var(--accent-4));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.proof-item:nth-child(3) strong {
  background: linear-gradient(120deg, var(--accent-4), var(--accent-3));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.proof-item:nth-child(4) strong {
  background: linear-gradient(120deg, var(--accent-3), var(--accent));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.proof-item span {
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.4;
  display: block;
}

@media (max-width: 840px) {
  /* Below the nav's off-canvas breakpoint the page has no sticky scene, so the
     root can safely clip horizontal overflow again — this catches the fixed
     off-canvas nav panel that would otherwise widen the page. */
  html, body { overflow-x: clip; }

  .site-footer {
    grid-template-columns: 1fr;
    text-align: center;
    gap: .5rem;
  }

  .site-footer .footer-brand-meta {
    text-align: center;
  }

  .pricing-grid, .two-col { grid-template-columns: 1fr; }

  .site-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    z-index: 310;
  }

  .nav-burger {
    display: flex;
  }

  body.nav-open .nav-burger {
    position: fixed;
    top: 1rem;
    right: 1.2rem;
    border-color: rgba(14,22,38,.2);
    background: var(--tint-2);
  }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(14,22,38,.42);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity .28s ease;
    pointer-events: none;
  }

  body.nav-open .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  body.nav-open {
    overflow: hidden;
  }

  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 310;
    width: min(330px, 84vw);
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: 1rem;
    padding: 5.2rem 1.4rem 2.5rem;
    background: #ffffff;
    border-left: 1px solid var(--border);
    box-shadow: -24px 0 60px rgba(14,22,38,.16);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.2,.7,.2,1);
    visibility: hidden;
  }

  body.nav-open .nav {
    transform: translateX(0);
    visibility: visible;
  }

  .nav-item {
    width: 100%;
    position: relative;
  }

  .nav-item > a,
  .nav > a:not(.nav-cta) {
    display: block;
    width: 100%;
    padding: .85rem .1rem;
    border-bottom: 1px solid var(--border);
  }

  .nav-item > a {
    padding-right: 2.4rem;
    border-bottom: none;
  }

  .nav-item {
    border-bottom: 1px solid var(--border);
  }

  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: 0;
    width: 2.6rem;
    height: 2.6rem;
    color: var(--muted);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: transform .15s ease, color .15s ease;
  }

  .nav-toggle svg {
    width: 1.15rem;
    height: 1.15rem;
  }

  .nav-item.open .nav-toggle {
    color: var(--accent);
    transform: rotate(180deg);
  }

  .nav-dropdown {
    position: static !important;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    margin: 0 !important;
    width: 100% !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s ease;
  }

  .nav-item.open .nav-dropdown {
    max-height: 48rem;
  }

  .nav-dropdown-inner {
    width: 100% !important;
    max-width: none !important;
    padding: 0 0 .6rem 1rem;
    border: none;
    background: transparent;
    box-shadow: none;
  }

  .nav-dropdown a {
    display: block;
    width: 100%;
    padding: .55rem .1rem;
    color: var(--muted);
  }

  .nav > a.nav-cta {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 1.2rem;
    padding: .85rem 1rem;
    color: #ffffff !important;
    font-weight: 800;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    border: none;
  }

  .hero,
  .split,
  .grid,
  .grid-2col {
    grid-template-columns: 1fr;
  }

  .split > .card {
    max-width: none;
    justify-self: stretch;
  }

  .hero {
    padding: 2.5rem 1.2rem 2rem;
    gap: 1.5rem;
  }

  .hero-card {
    gap: .6rem;
    padding: .8rem;
  }

  .hero-decor {
    display: none;
  }

  .hero-aurora {
    filter: blur(46px) saturate(1.05);
    opacity: .42;
    top: -10%;
    height: 115%;
  }

  .page-aurora {
    filter: blur(42px) saturate(1.05);
    opacity: .38;
    height: 22rem;
    top: -5rem;
  }

  .proof-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 1.1rem;
  }

  .proof-item {
    padding: 1.1rem .8rem;
  }

  .proof-item span {
    font-size: .78rem;
  }

  .proof-band {
    padding-bottom: 0;
  }

  .metric {
    padding: .8rem .9rem;
    display: flex;
    align-items: center;
    gap: .8rem;
  }

  .metric .icon-wrap-sm {
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .metric-copy strong {
    margin-bottom: 0;
    font-size: .95rem;
  }

  .metric-copy p {
    display: none;
  }

  #services .grid .card-link p,
  #use-cases .grid .card-link p {
    display: none;
  }

  #services .grid .card-link,
  #use-cases .grid .card-link {
    padding: 1rem 1.25rem;
  }

  #services .grid .card-link .icon-wrap,
  #use-cases .grid .card-link .icon-wrap {
    width: 2.4rem;
    height: 2.4rem;
    margin-bottom: .6rem;
  }

  #services .grid .card-link .icon-wrap svg,
  #use-cases .grid .card-link .icon-wrap svg {
    width: 1.2rem;
    height: 1.2rem;
  }

  #services .grid .card-link h3,
  #use-cases .grid .card-link h3 {
    font-size: 1.05rem;
    margin-bottom: 0;
  }

  #services .grid .card-link .more,
  #use-cases .grid .card-link .more {
    display: none;
  }

  .section-heading {
    margin-bottom: 1.2rem;
  }

  .section {
    padding: 2.5rem 1.2rem;
  }

  .page-hero {
    padding: 2.5rem 1.2rem .5rem;
  }

  .card {
    min-height: 0;
    padding: 1.25rem;
  }

  .callout {
    padding: 1.75rem 1.4rem;
    margin-bottom: 2.5rem;
  }

  .steps div {
    padding: 1rem;
  }

  h1 {
    font-size: clamp(2.2rem, 11vw, 3.1rem);
    line-height: 1.05;
  }

  h2 {
    font-size: clamp(1.5rem, 7vw, 2rem);
  }
}


/* ---- Comparison tables: reflow to stacked cards on narrow screens ----
   A 3 column table with a 720px min-width forced horizontal scrolling on a
   phone, which made the tables effectively unreadable. Below 760px each row
   becomes its own card: the row header is the card title, and each value is
   labelled with the column it belongs to via its data-label attribute. */
@media (max-width: 760px) {
  .table-wrap {
    overflow-x: visible;
    border: none;
    border-radius: 0;
    margin-top: 1.4rem;
  }

  .compare-table {
    min-width: 0;
    width: 100%;
    display: block;
    border-collapse: separate;
  }

  .compare-table thead {
    display: none;
  }

  .compare-table tbody,
  .compare-table tr,
  .compare-table tbody th,
  .compare-table td {
    display: block;
    width: 100%;
  }

  .compare-table tbody tr {
    border: 1px solid var(--border);
    border-radius: .9rem;
    overflow: hidden;
    margin-bottom: .8rem;
    background: var(--bg);
  }

  .compare-table tbody tr:nth-child(even) td,
  .compare-table tbody tr:nth-child(even) th {
    background: none;
  }

  .compare-table tbody th {
    white-space: normal;
    border: none;
    background: var(--tint-2);
    font-size: .95rem;
    padding: .75rem .95rem;
  }

  .compare-table td {
    border: none;
    border-top: 1px solid var(--border);
    padding: .75rem .95rem .85rem;
    font-size: .9rem;
  }

  /* Label each value with its column, since the header row is hidden */
  .compare-table td::first-line {
    line-height: 1.5;
  }

  .compare-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: .3rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
    position: static;
    width: auto;
    height: auto;
    background: none;
    border-radius: 0;
  }

  .compare-table td.advantage {
    padding-left: .95rem;
    background: rgba(18,145,107,.09);
  }

  .compare-table tbody tr:nth-child(even) td.advantage {
    background: rgba(18,145,107,.09);
  }

  .compare-table td.advantage[data-label]::before {
    content: "✓ " attr(data-label);
    color: var(--accent-2);
  }

  /* The desktop tick is a white check drawn on a circle from ::before. On mobile
     ::before becomes the column label, so that circle is gone and the check would
     float on nothing. Hide it; the label carries the tick instead. */
  .compare-table td.advantage::after {
    display: none;
  }
}

/* ---- Alternating section bands ----
   Sections are max-width 1180 and centred, so a plain background would only
   paint that column. The box-shadow + clip-path pair bleeds the tint to the
   full viewport width without needing a wrapper element on every page. */
.section.band {
  background: var(--panel-light);
  box-shadow: 0 0 0 100vmax var(--panel-light);
  clip-path: inset(0 -100vmax);
}

/* ================= Visual-first homepage ================= */

/* ---- Scroll-scrub assembly scene ----
   A tall track pins its child while the four capabilities converge into one
   owned system. All easing/positioning is computed in JS and written to inline
   styles, which is more reliable across browsers than nested calc()/clamp() on
   custom properties. Requires no overflow-x clip on any ancestor (that would
   collapse the sticky scroll height) — the site clips full-bleed elements
   locally instead. */
.assembly { position: relative; }

.assembly-track {
  height: 300vh;
  position: relative;
}

.assembly-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.assembly-inner {
  width: min(1180px, 92vw);
  margin: 0 auto;
  padding: 0 1.2rem;
  display: grid;
  gap: clamp(.8rem, 2.5vw, 1.6rem);
  justify-items: center;
  text-align: center;
}

.assembly-caption { min-height: 7rem; }

.assembly-caption h2 {
  font-size: clamp(1.7rem, 4.2vw, 3rem);
  letter-spacing: -.04em;
  line-height: 1.06;
  margin: .3rem 0 0;
  transition: opacity .35s ease;
}

.assembly-caption .eyebrow { transition: opacity .35s ease; }

.asm-sub {
  color: var(--muted);
  margin: .7rem 0 0;
  font-size: .95rem;
}

.assembly-svg {
  width: min(600px, 92vw);
  height: auto;
  overflow: visible;
}

.asm-node { will-change: transform, opacity; }
.asm-core { will-change: transform, opacity; }
.asm-node text.asm-node-label {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  fill: var(--ink);
}

/* Animated bits start hidden so there's no flash of the assembled state before
   the first scroll frame paints. */
.asm-flow, .asm-pulse, .asm-boundary, .asm-core,
.asm-core-tick, .asm-core-ring,
.asm-node text.asm-node-label { opacity: 0; }

/* Mobile + reduced-motion: no scrub. The scene collapses to a static, already
   assembled diagram (painted by JS), so small screens and motion-sensitive
   users get the end state without a heavy pinned scroll interaction. The 840px
   breakpoint matches the nav's off-canvas breakpoint, so below it the page has
   no sticky element and the root can safely clip horizontal overflow. */
@media (max-width: 840px) {
  .assembly-track { height: auto; }
  .assembly-sticky { position: static; height: auto; padding: 2.5rem 0; overflow: visible; }
  .asm-sub { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .assembly-track { height: auto; }
  .assembly-sticky { position: static; height: auto; padding: 2.5rem 0; overflow: visible; }
  .asm-sub { display: none; }
}

/* Big illustrated cards: the picture carries the meaning, the words just name it */
.vgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 2rem;
}

.vcard {
  display: block;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 1.4rem;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  transition: transform .22s cubic-bezier(.2,.7,.2,1), border-color .22s ease, box-shadow .22s ease;
}

.vcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 50px rgba(14,22,38,.13);
  border-color: rgba(15,125,181,.4);
}

.vcard-art {
  display: block;
  width: 100%;
  height: auto;
  background: var(--tint);
  border-bottom: 1px solid var(--border);
}

.vcard-body {
  padding: 1.25rem 1.4rem 1.5rem;
}

.vcard-body h3 {
  margin: 0 0 .3rem;
  font-size: 1.25rem;
  letter-spacing: -.02em;
}

.vcard-body p {
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.vcard .more {
  display: inline-block;
  margin-top: .9rem;
  color: var(--accent);
  font-weight: 700;
  font-size: .88rem;
}

/* One-line statement section: the whole point of the page, said once, loudly */
.statement {
  max-width: 1180px;
  margin: 0 auto;
  padding: 5rem 1.2rem;
  text-align: center;
}

.statement h2 {
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.055em;
  max-width: 18ch;
  margin: 0 auto .9rem;
}

.statement p {
  color: var(--muted);
  font-size: 1.1rem;
  max-width: 46ch;
  margin: 0 auto 1.6rem;
}

/* Compact facts row */
.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  max-width: 820px;
  margin: 2.2rem auto 0;
}

.fact {
  text-align: center;
  padding: 1.1rem .8rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--bg);
}

.fact strong {
  display: block;
  font-size: 1.5rem;
  letter-spacing: -.03em;
  color: var(--accent);
  margin-bottom: .2rem;
}

.fact span {
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.4;
}

/* Homepage FAQ: where the words live now */
.home-faq {
  max-width: 780px;
  margin: 0 auto;
}

@media (max-width: 840px) {
  .vgrid { grid-template-columns: 1fr; gap: .9rem; }
  .vcard-body { padding: 1rem 1.1rem 1.2rem; }
  .vcard-body h3 { font-size: 1.1rem; }
  .vcard-body p { font-size: .95rem; }
  .statement { padding: 3rem 1.2rem; }
  .statement p { font-size: 1rem; }
  .facts { grid-template-columns: 1fr; gap: .6rem; }
  .fact { display: flex; align-items: baseline; gap: .6rem; text-align: left; padding: .8rem 1rem; }
  .fact strong { font-size: 1.15rem; margin-bottom: 0; flex-shrink: 0; }
}

/* ---- Hero claims become links ---- */
a.metric {
  text-decoration: none;
  transition: background-color .18s ease, transform .18s ease;
}

a.metric:hover {
  background: var(--tint-2);
  transform: translateX(3px);
}

a.metric .metric-copy strong::after {
  content: " →";
  color: var(--accent);
  opacity: 0;
  transition: opacity .18s ease;
}

a.metric:hover .metric-copy strong::after {
  opacity: 1;
}

/* ---- Security strip ---- */
.sec-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.6rem;
}

.sec-item {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  padding: .9rem 1rem;
  border: 1px solid var(--border);
  border-radius: .9rem;
  background: var(--bg);
}

.sec-item svg {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  margin-top: .12rem;
  color: var(--accent-2);
}

.sec-item span {
  font-size: .9rem;
  line-height: 1.4;
}

/* ---- Card illustration animations (hover on desktop) ----
   Everything animates transform/opacity only, so it stays on the compositor. */
/* Scale/pop animations must resolve around each element's own box, not the
   SVG origin, or they fly in from the top-left corner. */
.vcard .f-tick,
.vcard .r-dot,
.vcard .r-out,
.vcard .r-sched,
.vcard .s-answer,
.vcard .s-lock,
.vcard .d-tick,
.vcard .d-sync,
.vcard .d-pin {
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes flyToStore {
  0%   { transform: translate(0,0) rotate(0deg); opacity: 1; }
  70%  { opacity: .25; }
  100% { transform: translate(120px, 26px) rotate(14deg) scale(.55); opacity: 0; }
}

@keyframes bandFill {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: var(--band-o, 1); transform: translateY(0); }
}

@keyframes growUp {
  from { transform: scaleY(.15); }
  to   { transform: scaleY(1); }
}

@keyframes drawLine {
  from { stroke-dashoffset: 180; }
  to   { stroke-dashoffset: 0; }
}

@keyframes popIn {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes sweepGlass {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-46px); }
  100% { transform: translateX(0); }
}

@keyframes spinSync {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes dropPin {
  0%   { transform: translateY(-18px); opacity: 0; }
  60%  { transform: translateY(3px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

@keyframes pulseRing {
  0%, 100% { transform: scale(1); opacity: .45; }
  50%      { transform: scale(1.18); opacity: .9; }
}

/* Card 1: records fly into the store, bands fill */
.vcard:hover .f-doc-1 { animation: flyToStore 1.1s ease-in forwards; }
.vcard:hover .f-doc-2 { animation: flyToStore 1.1s ease-in .16s forwards; }
.vcard:hover .f-doc-3 { animation: flyToStore 1.1s ease-in .32s forwards; }
.vcard .f-band { opacity: 0; }
.vcard:hover .f-band-1 { --band-o: .85; animation: bandFill .45s ease .5s forwards; }
.vcard:hover .f-band-2 { --band-o: .7;  animation: bandFill .45s ease .78s forwards; }
.vcard:hover .f-band-3 { --band-o: .55; animation: bandFill .45s ease 1.06s forwards; }
.vcard:hover .f-tick { animation: popIn .4s ease 1.4s both; }
.vcard .f-tick { opacity: 0; }

/* Card 2: chart builds, report assembles, schedule spins */
.vcard .r-bar { transform-box: fill-box; transform-origin: bottom; }
.vcard:hover .r-bar-1 { animation: growUp .5s cubic-bezier(.2,.8,.2,1) .05s both; }
.vcard:hover .r-bar-2 { animation: growUp .5s cubic-bezier(.2,.8,.2,1) .15s both; }
.vcard:hover .r-bar-3 { animation: growUp .5s cubic-bezier(.2,.8,.2,1) .25s both; }
.vcard:hover .r-bar-4 { animation: growUp .5s cubic-bezier(.2,.8,.2,1) .35s both; }
.vcard .r-line { stroke-dasharray: 180; stroke-dashoffset: 180; }
.vcard:hover .r-line { animation: drawLine .9s ease .3s forwards; }
.vcard .r-dot, .vcard .r-out { opacity: 0; }
.vcard:hover .r-dot { animation: popIn .35s ease 1.1s both; }
.vcard:hover .r-out { animation: popIn .5s ease 1.2s both; }
.vcard:hover .r-sched { animation: spinSync 1.6s linear 1.4s infinite; }

/* Card 3: glass sweeps the stack, answer appears, lock pulses */
.vcard:hover .s-glass { animation: sweepGlass 1.8s ease-in-out both; }
.vcard .s-answer { opacity: 0; }
.vcard:hover .s-answer { animation: popIn .5s ease 1s both; }
.vcard:hover .s-lock { animation: pulseRing 1.4s ease-in-out .6s infinite; }

/* Card 4: form ticks, sync spins, pin drops */
.vcard .d-tick, .vcard .d-pin { opacity: 0; }
.vcard:hover .d-tick { animation: popIn .4s ease .25s both; }
.vcard:hover .d-sync { animation: spinSync 1.2s linear .5s 2; }
.vcard:hover .d-pin { animation: dropPin .55s cubic-bezier(.3,1.4,.5,1) 1s both; }

/* No hover on touch, and the mobile layout is the same one-column view regardless
   of pointer type, so resolve the scene rather than leave a half-built one.
   The width clause also covers desktop responsive preview, where `hover: none`
   is not always emulated. */
@media (hover: none), (max-width: 840px) {
  /* End state of .vcard:hover. The translateY lift is deliberately omitted:
     with nothing to lift away from it reads as a 5px misalignment, not depth. */
  .vcard {
    border-color: rgba(15,125,181,.4);
    box-shadow: 0 22px 50px rgba(14,22,38,.13);
  }

  /* The records deliberately stay scattered rather than resolving to the
     flyToStore end state, which left the left half of the card empty. */

  .vcard .f-band-1 { opacity: .85; }
  .vcard .f-band-2 { opacity: .7; }
  .vcard .f-band-3 { opacity: .55; }
  .vcard .f-tick,
  .vcard .r-dot,
  .vcard .r-out,
  .vcard .s-answer,
  .vcard .d-tick,
  .vcard .d-pin { opacity: 1; }
  .vcard .r-line { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .vcard:hover .f-doc-1, .vcard:hover .f-doc-2, .vcard:hover .f-doc-3,
  .vcard:hover .f-band-1, .vcard:hover .f-band-2, .vcard:hover .f-band-3,
  .vcard:hover .f-tick,
  .vcard:hover .r-bar-1, .vcard:hover .r-bar-2, .vcard:hover .r-bar-3, .vcard:hover .r-bar-4,
  .vcard:hover .r-line, .vcard:hover .r-dot, .vcard:hover .r-out, .vcard:hover .r-sched,
  .vcard:hover .s-glass, .vcard:hover .s-answer, .vcard:hover .s-lock,
  .vcard:hover .d-tick, .vcard:hover .d-sync, .vcard:hover .d-pin {
    animation: none !important;
  }
  .vcard .f-band-1 { opacity: .85; }
  .vcard .f-band-2 { opacity: .7; }
  .vcard .f-band-3 { opacity: .55; }
  .vcard .f-tick, .vcard .r-dot, .vcard .r-out,
  .vcard .s-answer, .vcard .d-tick, .vcard .d-pin { opacity: 1; }
  .vcard .r-line { stroke-dashoffset: 0; }
}

@media (max-width: 840px) {
  .sec-row { grid-template-columns: 1fr; gap: .6rem; }
}

/* ---- Service page animated demo ----
   Reuses the four vcard illustrations, but on a service page each one is the
   feature, not one of a hoverable grid. So it plays automatically when scrolled
   into view (JS adds .playing) rather than on hover, and replays on re-entry.
   The animation trigger rules below mirror the .vcard:hover rules exactly. */
.service-demo {
  margin: 0 auto;
  max-width: 560px;
  border: 1px solid var(--border);
  border-radius: 1.4rem;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface), var(--surface-2));
  box-shadow: var(--shadow);
}
.service-demo .vcard-art {
  border-bottom: none;
  background: transparent;
}

/* start states (mirror the resting .vcard states) */
.service-demo .f-band { opacity: 0; }
.service-demo .f-tick { opacity: 0; }
.service-demo .r-bar { transform-box: fill-box; transform-origin: bottom; }
.service-demo .r-line { stroke-dasharray: 180; stroke-dashoffset: 180; }
.service-demo .r-dot, .service-demo .r-out { opacity: 0; }
.service-demo .s-answer { opacity: 0; }
.service-demo .d-tick, .service-demo .d-pin { opacity: 0; }
.service-demo .f-tick, .service-demo .r-dot, .service-demo .r-out, .service-demo .r-sched,
.service-demo .s-answer, .service-demo .s-lock, .service-demo .d-tick, .service-demo .d-sync,
.service-demo .d-pin {
  transform-box: fill-box;
  transform-origin: center;
}

/* play triggers (mirror .vcard:hover) */
.service-demo.playing .f-doc-1 { animation: flyToStore 1.1s ease-in forwards; }
.service-demo.playing .f-doc-2 { animation: flyToStore 1.1s ease-in .16s forwards; }
.service-demo.playing .f-doc-3 { animation: flyToStore 1.1s ease-in .32s forwards; }
.service-demo.playing .f-band-1 { --band-o: .85; animation: bandFill .45s ease .5s forwards; }
.service-demo.playing .f-band-2 { --band-o: .7;  animation: bandFill .45s ease .78s forwards; }
.service-demo.playing .f-band-3 { --band-o: .55; animation: bandFill .45s ease 1.06s forwards; }
.service-demo.playing .f-tick { animation: popIn .4s ease 1.4s both; }

.service-demo.playing .r-bar-1 { animation: growUp .5s cubic-bezier(.2,.8,.2,1) .05s both; }
.service-demo.playing .r-bar-2 { animation: growUp .5s cubic-bezier(.2,.8,.2,1) .15s both; }
.service-demo.playing .r-bar-3 { animation: growUp .5s cubic-bezier(.2,.8,.2,1) .25s both; }
.service-demo.playing .r-bar-4 { animation: growUp .5s cubic-bezier(.2,.8,.2,1) .35s both; }
.service-demo.playing .r-line { animation: drawLine .9s ease .3s forwards; }
.service-demo.playing .r-dot { animation: popIn .35s ease 1.1s both; }
.service-demo.playing .r-out { animation: popIn .5s ease 1.2s both; }
.service-demo.playing .r-sched { animation: spinSync 1.6s linear 1.4s infinite; }

.service-demo.playing .s-glass { animation: sweepGlass 1.8s ease-in-out both; }
.service-demo.playing .s-answer { animation: popIn .5s ease 1s both; }
.service-demo.playing .s-lock { animation: pulseRing 1.4s ease-in-out .6s infinite; }

.service-demo.playing .d-tick { animation: popIn .4s ease .25s both; }
.service-demo.playing .d-sync { animation: spinSync 1.2s linear .5s 2; }
.service-demo.playing .d-pin { animation: dropPin .55s cubic-bezier(.3,1.4,.5,1) 1s both; }

@media (prefers-reduced-motion: reduce) {
  /* Show the resolved end state, no motion. */
  .service-demo .f-band-1 { opacity: .85; }
  .service-demo .f-band-2 { opacity: .7; }
  .service-demo .f-band-3 { opacity: .55; }
  .service-demo .f-tick, .service-demo .r-dot, .service-demo .r-out,
  .service-demo .s-answer, .service-demo .d-tick, .service-demo .d-pin { opacity: 1; }
  .service-demo .r-line { stroke-dashoffset: 0; }
  .service-demo.playing * { animation: none !important; }
}

/* ---- Prose (policy / legal / long-form single column) ---- */
.prose {
  max-width: 760px;
}
.prose h2 {
  font-size: 1.4rem;
  letter-spacing: -.02em;
  margin: 2.4rem 0 .7rem;
}
.prose h2:first-of-type { margin-top: 0; }
.prose p {
  color: var(--muted);
  margin: 0 0 1rem;
  line-height: 1.7;
}
.prose p strong { color: var(--ink); }
.prose a { color: var(--accent); }

/* ---- FAQ route-through ---- */
.faq-more {
  max-width: 780px;
  margin: 1.2rem auto 0;
  text-align: center;
}

.faq-more a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  font-size: .95rem;
}

.faq-more a:hover { text-decoration: underline; }

/* ---- Homepage compare teaser ---- */
.vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  margin-top: 2rem;
  border: 1px solid var(--border);
  border-radius: 1.3rem;
  overflow: hidden;
}

.vs-side {
  padding: 1.6rem 1.5rem;
}

.vs-side.them { background: var(--tint); }
.vs-side.us { background: rgba(18,145,107,.07); }

.vs-side h3 {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  margin-bottom: 1rem;
  color: var(--muted);
}

.vs-side.us h3 { color: var(--accent-2); }

.vs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}

.vs-list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: .95rem;
  color: var(--muted);
  line-height: 1.45;
}

.vs-list li::before {
  content: "×";
  position: absolute;
  left: 0;
  top: -.1rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-3);
}

.vs-side.us .vs-list li {
  color: var(--text);
}

.vs-side.us .vs-list li::before {
  content: "✓";
  font-size: .95rem;
  color: var(--accent-2);
}

.vs-divider {
  width: 1px;
  background: var(--border);
}

@media (max-width: 760px) {
  .vs { grid-template-columns: 1fr; }
  .vs-divider { width: auto; height: 1px; }
  .vs-side { padding: 1.2rem 1.1rem; }
}

/* ---- Icons inline with their heading ----
   Stacked above, each icon cost ~4rem of vertical space and pushed the
   heading down for little gain. Floating them keeps the visual cue but
   lets the heading sit alongside. Float avoids restructuring 26 pages. */
.page-hero > .icon-wrap,
.card > .icon-wrap,
.callout > .icon-wrap,
.section.split > div > .icon-wrap {
  float: left;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: .6rem;
  margin: 0 .65rem .15rem 0;
}

.page-hero > .icon-wrap svg,
.card > .icon-wrap svg,
.callout > .icon-wrap svg,
.section.split > div > .icon-wrap svg {
  width: 1.1rem;
  height: 1.1rem;
}

/* The eyebrow sits beside the icon; the heading below clears it */
.page-hero > .eyebrow,
.callout > .eyebrow,
.section.split > div > .eyebrow {
  line-height: 2.1rem;
  margin-bottom: .55rem;
}

.page-hero > h1,
.callout > h2,
.section.split > div > h2 {
  clear: left;
}

/* Cards have no eyebrow: the h3 itself sits beside the icon */
.card > h3 {
  overflow: hidden;
  min-height: 2.1rem;
  display: flex;
  align-items: center;
}

.card > p,
.card > ul,
.card > .feature-list,
.card > .tag-row {
  clear: left;
}

/* ---- FAQ topic groups ---- */
.faq-group {
  max-width: 900px;
  margin: 0 auto 2.6rem;
}

.faq-group-head {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--border);
}

.faq-group-head .icon-wrap {
  width: 2rem;
  height: 2rem;
  border-radius: .55rem;
  margin: 0;
  flex-shrink: 0;
}

.faq-group-head .icon-wrap svg { width: 1.05rem; height: 1.05rem; }

.faq-group-head h2 {
  font-size: 1.15rem;
  letter-spacing: -.02em;
  margin: 0;
}