/* ==========================================================================
   REV1 Finance — design system
   Minimal SaaS aesthetic: near-white ground, hairline grid, tight display type.
   ========================================================================== */

:root {
  /* Surface */
  --bg:            #ffffff;
  --bg-subtle:     #fafafa;
  --bg-sunken:     #f5f5f4;
  --surface:       #ffffff;

  /* Ink */
  --ink:           #0a0a0b;
  --ink-2:         #3f3f46;
  --muted:         #71717a;
  --muted-2:       #a1a1aa;

  /* Line */
  --line:          #e7e7e4;
  --line-strong:   #d6d6d2;

  /* Accent — the boreal green straight from the REV1 logo mark */
  --accent:        #1f3a2c;
  --accent-hover:  #2a4d3b;   /* lifts on hover rather than going darker */
  --accent-ink:    #16291f;
  --accent-soft:   #eef2ef;
  --accent-line:   #ccd8d1;

  /* Signal */
  --pos:           #15803d;
  --neg:           #b91c1c;
  --warn:          #b45309;

  /* Type */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --gutter: 24px;
  --maxw: 1200px;
  --nav-h: 64px;
}

/* --------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: #d5e0da; color: var(--accent-ink); }

/* --------------------------------------------------------------- primitives */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.eyebrow--muted { color: var(--muted-2); }

/* Display type — tight, Attio-style */
.d1 {
  text-wrap: balance;
  font-size: clamp(32px, 3.9vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 600;
}
.d2 {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.032em;
  font-weight: 600;
}
.d3 {
  font-size: clamp(21px, 2.3vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.024em;
  font-weight: 600;
}

/* Two-tone paragraph: lead sentence in ink, remainder muted */
.lede {
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.55;
  letter-spacing: -0.014em;
  color: var(--muted);
  max-width: 54ch;
}
.lede b, .lede strong { color: var(--ink); font-weight: 500; }

.body-sm { font-size: 14px; line-height: 1.6; color: var(--muted); }

.mono-xs {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.012em;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:active { transform: translateY(0.5px); }

.btn--primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(31,58,44,.22), inset 0 1px 0 rgba(255,255,255,.10);
}
.btn--primary:hover { background: var(--accent-hover); }
.btn--primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: 0 1px 1.5px rgba(0,0,0,.035);
}
.btn--ghost:hover { background: var(--bg-subtle); border-color: #c4c4bf; }

.btn--sm { height: 34px; padding: 0 13px; font-size: 13px; border-radius: 8px; }
.btn--accent { background: var(--accent); color: #fff; }
.btn--accent:hover { background: var(--accent-hover); }

.btn .arw { transition: transform .22s var(--ease); }
.btn:hover .arw { transform: translateX(2px); }

/* ---------------------------------------------------------------- nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--nav-h);
}
.logo { display: inline-flex; align-items: center; gap: 7px; }
/* Full lockup. Sized so the green tile lands at ~22px — the height the drawn
   chip used to be — which keeps the nav's optical weight unchanged. */
.logo__img { display: block; height: 26px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links a {
  padding: 7px 11px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 450;
  color: var(--ink-2);
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.nav__links a:hover { background: var(--bg-sunken); color: var(--ink); }
.nav__cta { display: flex; align-items: center; gap: 8px; }

.nav__burger {
  display: none;
  width: 36px; height: 36px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}
.nav__mobile {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 8px var(--gutter) 16px;
}
.nav__mobile.is-open { display: block; }
.nav__mobile a {
  display: block;
  padding: 11px 2px;
  font-size: 15px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.nav__mobile .btn { width: 100%; margin-top: 14px; }

/* ---------------------------------------------------------------- sections */
.section { padding-block: clamp(64px, 8vw, 112px); }
.section--sunken { background: var(--bg-subtle); border-block: 1px solid var(--line); }
.section__head { max-width: 720px; }
.section__head .eyebrow { display: block; margin-bottom: 18px; }
.section__head .d2 { margin-bottom: 16px; }

/* Hairline grid: cells separated by 1px lines, no outer box */
.grid-cells {
  display: grid;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.grid-cells > * {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,16,20,.04), 0 8px 24px -12px rgba(16,16,20,.10);
}

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ====================================================================== HERO */
.hero {
  position: relative;
  padding-top: clamp(48px, 7vw, 84px);
  padding-bottom: clamp(56px, 7vw, 92px);
  overflow: hidden;
}
/* Very soft tinted wash, Attio-style — replaces the old papyrus texture */
.hero::before {
  content: "";
  position: absolute;
  inset: -10% -20% auto -20%;
  height: 780px;
  background:
    radial-gradient(52% 44% at 22% 8%,  rgba(31,58,44,.14), transparent 66%),
    radial-gradient(46% 42% at 82% 4%,  rgba(94,120,180,.12), transparent 68%),
    linear-gradient(180deg, rgba(250,250,249,.9), rgba(255,255,255,0) 72%);
  pointer-events: none;
  z-index: 0;
}
.hero__inner { position: relative; z-index: 1; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255,255,255,.7);
  font-size: 12.5px;
  font-weight: 450;
  color: var(--ink-2);
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.pill:hover { border-color: #bdbdb8; background: #fff; }
.pill .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(31,58,44,.14);
}

.hero h1 { margin: 20px 0 20px; }
.hero__sub { margin-bottom: 28px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }

.markets { display: flex; align-items: center; gap: 12px; }
.markets__flags { display: flex; gap: 6px; }
.flag {
  width: 21px; height: 15px;
  border-radius: 2.5px;
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
}

/* --------------------------------------------------- hero product mockup */
.mock {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(16,16,20,.05),
    0 12px 28px -14px rgba(16,16,20,.16),
    0 40px 80px -40px rgba(16,16,20,.24);
  overflow: hidden;
}
.mock__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #fcfcfb, #fafafa);
}
.mock__title { font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; }
.live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--pos);
}
.live i {
  width: 5px; height: 5px; border-radius: 999px; background: var(--pos);
  animation: blip 2.4s var(--ease) infinite;
}
@keyframes blip { 0%,100% { opacity:1 } 50% { opacity:.3 } }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); }
.kpi { padding: 16px 14px; border-right: 1px solid var(--line); }
.kpi:last-child { border-right: 0; }
.kpi__label { font-family: var(--mono); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-2); }
.kpi__val {
  margin-top: 9px;
  font-size: clamp(19px, 2.1vw, 24px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
}
.kpi__val span { font-size: 12px; font-weight: 450; color: var(--muted); letter-spacing: -0.01em; }
.kpi__delta { margin-top: 7px; font-size: 11.5px; color: var(--muted); }
.kpi__delta.up { color: var(--pos); }
.kpi__delta.down { color: var(--pos); }

.mock__chart { padding: 14px; border-top: 1px solid var(--line); }
.mock__chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.mock__foot {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: var(--accent-soft);
}
.mock__foot .tag {
  flex-shrink: 0;
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 5px;
  background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: 9px; font-weight: 600;
}
.mock__foot p { font-size: 12.5px; line-height: 1.45; color: var(--accent-ink); }
.mock__foot a { font-size: 12px; font-weight: 500; color: var(--accent); white-space: nowrap; }
.mock__foot a:hover { text-decoration: underline; }

/* Floating chat card over the mockup */
.chat {
  z-index: 2;
  position: absolute;
  top: 52px;            /* clears the card's header row */
  left: 20px;
  right: 20px;
  pointer-events: none;
}
.chat__stage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* bubbles hug their content instead of stretching */
  gap: 10px;
  min-height: 180px;
}

.bubble {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  max-width: 92%;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .32s var(--ease), transform .32s var(--ease);
}
.bubble.is-on { opacity: 1; transform: none; }

.bubble--user { align-self: flex-end; flex-direction: row-reverse; }
.bubble--user .bubble__body {
  background: var(--surface);
  border-color: var(--line-strong);
}

.bubble--rev .bubble__body {
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

/* Typing indicator and the reply it becomes share one slot, so the card
   never changes height mid-loop. */
.chat__reply { position: relative; min-height: 84px; align-self: stretch; }
.chat__reply .bubble { position: absolute; inset: 0 auto auto 0; }

.bubble__body {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  flex: 0 1 auto;
  min-width: min(190px, 100%);
  max-width: 330px;
  box-shadow: 0 1px 2px rgba(16,16,20,.05), 0 10px 22px -12px rgba(16,16,20,.22);
}

.av {
  flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 999px;
  display: grid; place-items: center;
  font-size: 9.5px; font-weight: 600; letter-spacing: 0;
  font-family: var(--mono);
}
.chat .av { box-shadow: 0 0 0 2px var(--surface), 0 1px 3px rgba(16,16,20,.16); }
.av--a { background: #e4e4e7; color: #52525b; }
.av--b { background: var(--accent); color: #fff; }
.av--photo {
  display: block;
  object-fit: cover;
  object-position: 50% 22%;
  background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px rgba(16,16,20,.08);
}
/* The chat avatars sit on the report card, so they keep their separating ring. */
.chat .av--photo { box-shadow: 0 0 0 2px var(--surface), 0 1px 3px rgba(16,16,20,.16); }

.chat__who {
  display: block;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat__msg { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }

.dots { display: inline-flex; gap: 3px; margin-top: 7px; }
.dots i {
  width: 4px; height: 4px; border-radius: 999px;
  background: var(--accent);
  opacity: .35;
  animation: dot 1.1s var(--ease) infinite;
}
.dots i:nth-child(2) { animation-delay: .18s; }
.dots i:nth-child(3) { animation-delay: .36s; }
@keyframes dot { 0%, 100% { opacity: .25; transform: translateY(0) } 45% { opacity: .9; transform: translateY(-2px) } }

@media (prefers-reduced-motion: reduce) {
  .bubble { transition: none; }
  .dots i { animation: none; opacity: .5; }
}

.mock-wrap { position: relative; }


/* ============================================================== LOGO STRIP */
.logos { border-block: 1px solid var(--line); background: var(--bg-subtle); }
.logos__inner {
  display: flex; align-items: center; gap: clamp(24px, 5vw, 64px); justify-content: center;
  flex-wrap: wrap;
  padding-block: 26px;
}
.logos__label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-2); white-space: nowrap;
}
.logos__set {
  display: flex;
  /* Align on the baseline, not the box: Trustly's artwork reserves 20.6% of its
     height for the "y" descender, while Bower and Trialbee have none and end at
     the baseline. Centring these boxes makes Trustly ride high and read small. */
  align-items: flex-end;
  gap: clamp(28px, 5vw, 60px);
  flex-wrap: wrap;
}
.logos__set img {
  height: 23px;
  width: auto;
  opacity: .62;
  filter: grayscale(1) contrast(.9);
  transition: opacity .2s var(--ease), filter .2s var(--ease);
}
.logos__set img:hover { opacity: .95; filter: grayscale(0) contrast(1); }
/* Heights chosen so the wordmarks match optically, then the descender is
   discounted so every baseline lands on the same line. */
.logos__set img[alt="Bower"]   { height: 23px; }
.logos__set img[alt="Trustly"] { height: 22px; margin-bottom: -3.95px; } /* 24 x 0.2064 */
.logos__set img[alt="Trialbee"] { height: 19px; }


/* ============================================ WHY WE EXIST — the CEO/CFO pair */
.why__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.duo { position: relative; margin: 0; }
.duo__photo {
  width: 100%;
  height: auto;          /* the width/height attrs would otherwise beat aspect-ratio */
  aspect-ratio: 4 / 3;
  max-width: 100%;
  object-fit: cover;
  object-position: 50% 26%;
  border-radius: 14px;
  background: var(--bg-sunken);
  box-shadow: 0 1px 2px rgba(16,16,20,.05), 0 18px 44px -22px rgba(16,16,20,.34);
}

/* Name tags sit over the lower band so neither face is covered. The founder's
   tag is the loud one; the CFO's is deliberately quieter — supporting act. */
.duo__tag {
  position: absolute;
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(16,16,20,.14), 0 10px 24px -12px rgba(16,16,20,.34);
}
.duo__role {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.duo__tag--ceo {
  left: 5%;
  bottom: 21%;
  background: var(--ink);
  color: #fff;
}
.duo__tag--cfo {
  right: 4%;
  bottom: 7%;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}
.duo__tag--cfo .duo__role { color: var(--accent); opacity: 1; }
.duo__mark {
  align-self: center;
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 600;
  font-style: normal;
  flex-shrink: 0;
}



/* ========================================================== WHY WE EXIST — outcomes */
.outcomes {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}
.outcomes__lead { grid-column: 1 / -1; margin-bottom: 4px; }
.outcomes__lead .eyebrow { display: block; margin-bottom: 12px; }

.outcome {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  padding: 26px 24px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.outcome:hover {
  border-color: var(--accent-line);
  box-shadow: 0 1px 2px rgba(16,16,20,.04), 0 16px 34px -20px rgba(31,58,44,.30);
  transform: translateY(-2px);
}
/* The last two carry a wider visual, so they take half the row each. */
.outcome--wide { grid-column: span 3; flex-direction: row; gap: 22px; align-items: center; }
.outcome--wide .outcome__body { flex: 1 1 50%; min-width: 0; }
.outcome--wide .art { flex: 1 1 50%; margin-top: 0; padding-top: 0; border-top: 0; min-width: 0; }

.outcome__icon {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  margin-bottom: 16px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
}
.outcome__icon svg { width: 19px; height: 19px; }

.outcome h4 {
  margin: 0 0 8px;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.28;
  color: var(--ink);
}
.outcome p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ---- the small proof artefact at the foot of each card ---- */
.art {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.art__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.art__row b { font-size: 13px; font-weight: 600; letter-spacing: -0.014em; }
.art__fc { color: var(--accent); }

/* board question chips */
.qa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 9px;
  background: var(--bg-sunken);
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-2);
}
.qa--ok { align-self: flex-end; background: var(--accent-soft); color: var(--accent); font-weight: 500; }
.qa--ok svg { width: 10px; height: 8px; flex-shrink: 0; }

/* runway meter */
.meterline { height: 6px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; }
.meterline i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }

/* admin checklist */
.tick-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.tick-row i {
  display: grid; place-items: center;
  width: 15px; height: 15px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 8px; font-style: normal; flex-shrink: 0;
}
.tick-row em {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 2px 6px;
  border-radius: 4px;
}

/* scenario comparison */
.art--scen { gap: 12px; }
.scen { display: grid; grid-template-columns: 1fr; gap: 5px; }
.scen__label { font-size: 12px; color: var(--muted); }
.scen__bar { height: 6px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; }
.scen__bar i { display: block; height: 100%; border-radius: 999px; background: var(--muted-2); }
.scen__val { font-size: 11.5px; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.scen--pick .scen__label { color: var(--ink); font-weight: 500; }
.scen--pick .scen__bar i { background: var(--accent); }
.scen--pick .scen__val { color: var(--accent); font-weight: 500; }

.art--chart svg { display: block; }

/* ============================================================ WHY WE EXIST */

/* =============================================================== WHAT WE DO */
.pillars { margin-top: 44px; }
.pillars__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ptab {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 18px 20px 18px 0;
  margin-right: 20px;
  background: none; border: 0;
  text-align: left; cursor: pointer;
  color: var(--muted);
  transition: color .2s var(--ease);
}
.ptab::after {
  content: ""; position: absolute; left: 0; right: 20px; bottom: -1px;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.ptab[aria-selected="true"] { color: var(--ink); }
.ptab[aria-selected="true"]::after { transform: scaleX(1); }
.ptab:hover { color: var(--ink-2); }
.ptab__n { font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; color: var(--muted-2); }
.ptab[aria-selected="true"] .ptab__n { color: var(--accent); }
.ptab__t { font-size: 14.5px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; }

.pillar__panel {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding-top: 44px;
}
.pillar__panel[hidden] { display: none; }
.pillar__copy h3 { margin-bottom: 20px; max-width: 18ch; }
.pillar__list li {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.pillar__list li:first-child { border-top: 1px solid var(--line); }
.pillar__list .tick { flex-shrink: 0; margin-top: 3px; color: var(--accent); }

/* ---------------------------------------------- mockup: finance overview */
.ov__kpis { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.ov__chart { padding: 16px 14px; }
.spark-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.spark-axis { display: flex; justify-content: space-between; margin-top: 7px; }
.spark-axis span { font-family: var(--mono); font-size: 9.5px; color: var(--muted-2); }
.ov__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px; border-top: 1px solid var(--line); background: var(--bg-subtle);
}

/* ------------------------------------------------- mockup: audit checklist */
.chk__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px; border-bottom: 1px solid var(--line);
}
.progress { height: 3px; background: var(--bg-sunken); border-radius: 999px; overflow: hidden; width: 100%; }
.progress i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.chk__row {
  display: grid;
  grid-template-columns: 22px minmax(0,1fr) auto;
  gap: 12px; align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
}
.chk__row:last-child { border-bottom: 0; }
.chk__i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 999px; }
.chk__i.done { background: var(--accent); color: #fff; }
.chk__i.wait { border: 1px dashed var(--line-strong); color: var(--muted-2); }
.chk__t { font-size: 13px; font-weight: 500; letter-spacing: -0.012em; }
.chk__s { font-size: 11px; color: var(--muted-2); margin-top: 2px; }
.badge {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px; white-space: nowrap;
}
.badge--ok   { background: var(--accent-soft); color: var(--accent); }
.badge--rev  { background: #fef3c7; color: #92400e; }
.badge--pend { background: var(--bg-sunken); color: var(--muted); }
.badge--due  { background: #fee2e2; color: #991b1b; }

/* ------------------------------------------------ mockup: budget vs forecast */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted-2); text-align: right; font-weight: 500;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.tbl th:first-child { text-align: left; }
.tbl td {
  padding: 10px 14px; font-size: 13px; text-align: right;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.tbl td:first-child { text-align: left; color: var(--ink-2); }
.tbl tr:last-child td { border-bottom: 0; }
.neg { color: var(--neg); }
.pos { color: var(--pos); }

/* -------------------------------------------------- mockup: scorecard */
.sc__row {
  display: grid; grid-template-columns: minmax(0,1fr) 62px 96px;
  gap: 12px; align-items: center;
  padding: 11px 14px; border-bottom: 1px solid var(--line);
}
.sc__row:last-of-type { border-bottom: 0; }
.sc__t { font-size: 12.5px; font-weight: 500; letter-spacing: -0.012em; }
.sc__sub { font-size: 10.5px; color: var(--muted-2); margin-top: 2px; }
.sc__v { font-size: 13px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.meter { position: relative; height: 4px; border-radius: 999px; background: var(--bg-sunken); }
.meter i { position: absolute; top: -2px; width: 8px; height: 8px; border-radius: 999px; background: var(--accent); }
.meter.mid i { background: var(--warn); }


/* ================================================== HOW WE WORK — the four steps */
.steps {
  display: flex;
  flex-direction: column;
  gap: clamp(52px, 6vw, 92px);
  margin-top: clamp(44px, 5vw, 72px);
}
.step {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
/* Alternate sides so the eye zig-zags down the section. */
.step:nth-child(even) .step__visual { order: -1; }

.step__n {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--accent);
  margin-bottom: 16px;
}
.step__copy h3 {
  margin: 0 0 14px;
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 600;
  letter-spacing: -0.026em;
  line-height: 1.18;
}
.step__copy p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); }
.step__kicker {
  margin-top: 16px !important;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--ink) !important;
  font-weight: 500;
  font-size: 14.5px !important;
}
.visual__cap {
  margin: 14px 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-2);
}

/* ---------------------------------------------------- 01 · connected stack */
.orbit {
  --rin: 96px;
  --rout: 158px;
  position: relative;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.orbit::before,
.orbit::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px dashed var(--line-strong);
  opacity: .8;
}
.orbit::before { width: calc(var(--rin) * 2); height: calc(var(--rin) * 2); }
.orbit::after  { width: calc(var(--rout) * 2); height: calc(var(--rout) * 2); }

.orbit__core {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  border-radius: 16px;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  box-shadow: 0 6px 18px -6px rgba(31,58,44,.5);
}
/* Zero-size anchors at the centre: a rotating box with real dimensions would
   swell its own bounding rect to width x sqrt(2) and widen the page. */
.orbit__ring { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.orbit__ring--in .orbit__chip  { --r: var(--rin); }
.orbit__ring--out .orbit__chip { --r: var(--rout); }
.orbit__ring--in  { animation: orbit-spin 34s linear infinite; }
.orbit__ring--out { animation: orbit-spin 52s linear infinite reverse; }

.orbit__chip {
  position: absolute;
  top: 0;
  left: 0;
  transform:
    rotate(var(--a))
    translate(var(--r))
    rotate(calc(var(--a) * -1))
    translate(-50%, -50%);
}
/* Cancels the ring's rotation so every wordmark stays upright. */
.orbit__chip i { display: block; animation: orbit-spin 34s linear infinite reverse; }
.orbit__ring--out .orbit__chip i { animation: orbit-spin 52s linear infinite; }

.orbit__chip i {
  display: grid;
  place-items: center;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(16,16,20,.05), 0 8px 20px -12px rgba(16,16,20,.3);
  font-style: normal;
}
.orbit__chip img {
  display: block;
  width: auto;
  max-width: 58px;
  height: 20px;
  object-fit: contain;
}
/* Optically matched rather than numerically equal — a wordmark reads far larger
   than an icon at the same pixel height. */
.orbit__chip img[src*="fortnox"] { height: 22px; }
.orbit__chip img[src*="stripe"]  { height: 15px; }
/* The Pleo file bakes in ~40% transparent padding, so a matching CSS height
   renders a mark ~40% smaller than the others. Scale the box up until the ink
   measures 20px like Slack/HubSpot, then pull the padding back off with negative
   margins so the pill stays the same size as its neighbours. */
.orbit__chip img[src*="pleo"] { width: 33px; height: 33px; margin: -6.5px; }
.orbit__chip img[src*="hubspot"] { height: 20px; border-radius: 4px; }
.orbit__chip img[src*="slack"]   { height: 20px; }
.orbit__chip img[src*="excel"]   { height: 19px; border-radius: 3px; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------ 02 · delivery cycle */
.cycle {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(16,16,20,.04), 0 14px 34px -22px rgba(16,16,20,.2);
}
.cycle__tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--bg-sunken);
  border-radius: 10px;
}
.cyc {
  padding: 7px 4px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.cyc[aria-selected="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(16,16,20,.1);
}

.cycle__dial { position: relative; width: min(240px, 68%); margin: 18px auto 4px; aspect-ratio: 1; }
.cycle__arc { transition: stroke-dasharray .5s var(--ease); }
.cycle__mid {
  position: absolute; inset: 0;
  display: grid; place-content: center; text-align: center;
}
.cycle__count { display: block; font-size: 34px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.cycle__unit {
  display: block; margin-top: 7px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-2);
}
.cycle__list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; justify-content: center; }
.cycle__list li {
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  font-size: 12px;
  color: var(--accent-ink);
  animation: chip-in .32s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
@keyframes chip-in { from { opacity: 0; transform: translateY(5px); } }

/* -------------------------------------------------- 03 · strategic projects */
.projects__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.projects__bank { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; }
.projects__bank em { font-style: normal; font-weight: 450; color: var(--muted); font-size: 12.5px; }

.prj {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px 42px;
  gap: 14px; align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
.prj__main { display: flex; align-items: center; gap: 9px; min-width: 0; }
.prj__name {
  font-size: 13.5px; font-weight: 500; letter-spacing: -0.014em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.prj__meter { height: 5px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; }
.prj__meter i {
  display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent);
}
.reveal.is-in .prj__meter i { width: var(--w); transition: width .9s var(--ease) .15s; }
.prj__hrs { font-size: 12.5px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.prj--idle .prj__name { color: var(--muted); }

/* ------------------------------------------------------- 04 · shared channel */
.slack__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.slack__chan { font-size: 13.5px; font-weight: 600; letter-spacing: -0.016em; }
.slack__body { padding: 16px; display: flex; flex-direction: column; gap: 16px; }

.msg { display: flex; gap: 11px; opacity: 0; transform: translateY(8px); }
.reveal.is-in .msg {
  animation: msg-in .45s var(--ease) both;
  animation-delay: var(--d, 0ms);
}
@keyframes msg-in { to { opacity: 1; transform: none; } }

.msg__av { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; object-position: 50% 22%; flex-shrink: 0; }
.msg__who { display: block; font-size: 13px; font-weight: 600; letter-spacing: -0.014em; margin-bottom: 3px; }
.msg__who em { font-style: normal; font-weight: 450; font-size: 11px; color: var(--muted-2); margin-left: 5px; }
.msg__tag {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .07em; text-transform: uppercase;
  font-weight: 500; color: var(--accent); background: var(--accent-soft);
  padding: 2px 6px; border-radius: 4px; margin-left: 5px;
}
.msg p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.msg__file {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 9px;
  padding: 7px 11px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--bg-subtle); font-size: 12.5px; color: var(--ink-2);
}
.msg__file svg { width: 14px; height: 14px; color: var(--accent); flex-shrink: 0; }

/* ------------------------------------------------------------- rolled up */
.rollup {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(24px, 4vw, 56px); flex-wrap: wrap;
  margin-top: clamp(52px, 6vw, 88px);
  padding: clamp(26px, 3vw, 38px);
  border: 1px solid var(--accent-line);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--accent-soft), #fff 70%);
}
.rollup .eyebrow { display: block; margin-bottom: 12px; }
.rollup h3 { margin: 0 0 10px; }
.rollup p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 62ch; }
.rollup .btn { flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .orbit__ring, .orbit__chip i { animation: none !important; }
  .cycle__list li, .reveal.is-in .msg { animation: none !important; opacity: 1; transform: none; }
  .reveal.is-in .prj__meter i { transition: none; }
}


/* ========================================================== MEET THE AGENTS */
/* The one dark moment on the page. Because every component is built on tokens,
   inverting the section is a matter of redefining them in this scope — and it
   also breaks the light/tinted alternation cleanly, so nothing downstream of it
   needs to flip. */
.section--ink {
  --surface:     #151a1c;
  --bg-subtle:   #131719;
  --bg-sunken:   #1c2225;
  --ink:         #f2f4f3;
  --ink-2:       #c7cdcb;
  --muted:       #939b98;
  --muted-2:     #6d7572;
  --line:        #252c2f;
  --line-strong: #323a3d;
  --accent:      #86d6ac;
  --accent-ink:  #cdeddd;
  --accent-soft: #19271f;
  --accent-line: #2c4536;
  background: #0e1213;
  color: var(--ink);
  border-block: 1px solid #1d2426;
}
.section--ink .d2,
.section--ink h3 { color: var(--ink); }
.section--ink ::selection { background: #2c4536; color: #eafaf1; }

.agents {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: clamp(40px, 5vw, 64px);
}
.agent {
  display: flex;
  flex-direction: column;
  padding: 28px 26px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color .22s var(--ease), transform .22s var(--ease);
}
.agent:hover { border-color: var(--accent-line); transform: translateY(-2px); }

.agent__name {
  display: block;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 14px;
}
.agent__name em { font-style: normal; color: var(--accent); }
.agent__head h3 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.024em;
  line-height: 1.3;
}
.agent__head p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

.agent__viz {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg-subtle);
  color: var(--ink);
}

/* Each visual's pieces fade in on a stagger once the card reveals. */
.agent__viz [style*="--s"] { opacity: 0; transform: translateY(6px); }
.reveal.is-in .agent__viz [style*="--s"] {
  animation: viz-in .42s var(--ease) both;
  animation-delay: calc(var(--s) * 130ms);
}
@keyframes viz-in { to { opacity: 1; transform: none; } }

.viz__prompt,
.viz__ask {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background: var(--bg-sunken);
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 14px;
  min-height: 38px;
}
.viz__prompt i,
.viz__ask i { color: var(--accent); font-style: normal; font-weight: 600; }
.viz__label {
  font-family: var(--mono); font-size: 9px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted-2);
}

/* ---- reports ---- */
.viz-reports__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  min-width: 0;
}
.tile span {
  display: block;
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tile b { display: block; margin-top: 6px; font-size: 15px; letter-spacing: -0.028em; }
.tile i { font-style: normal; font-size: 8px; }
.tile i.up { color: var(--accent); }
.tile i.dn { color: #e0a04a; }

.viz-reports__chart { margin-top: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 52px; margin-top: 10px; }
.bars i {
  flex: 1; border-radius: 3px 3px 0 0; background: var(--accent); opacity: .85;
  height: 0;
}
.reveal.is-in .bars i { height: var(--h); transition: height .7s var(--ease); }
.reveal.is-in .bars i:nth-child(2) { transition-delay: .06s; }
.reveal.is-in .bars i:nth-child(3) { transition-delay: .12s; }
.reveal.is-in .bars i:nth-child(4) { transition-delay: .18s; }
.reveal.is-in .bars i:nth-child(5) { transition-delay: .24s; }
.reveal.is-in .bars i:nth-child(6) { transition-delay: .30s; }

/* ---- forecasts ---- */
.drivers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.driver {
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  font-size: 11.5px; color: var(--accent-ink);
}
.driver b { color: var(--accent); font-weight: 600; margin-left: 3px; }
.fc-chart {
  color: var(--ink);
  display: block;
  width: 100%;
  /* Stretched to the box rather than letter-boxed inside it. Every stroke below
     uses non-scaling-stroke, so the non-uniform scale never thickens a line. */
  flex: 1 1 auto;
  min-height: 0;
  margin: 2px 0;
}
.fc-grid path,
.fc-now,
.fc-line { vector-effect: non-scaling-stroke; }

.fc-now { stroke: currentColor; opacity: .22; stroke-width: 1; stroke-dasharray: 3 3; }

.fc-line {
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  /* pathLength="1" makes the draw independent of the rendered path length,
     which non-scaling-stroke would otherwise change with the container. */
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.reveal.is-in .fc-line { animation: draw 1.1s var(--ease) forwards; }
.fc-line--base { stroke: var(--accent); }
.fc-line--hi { stroke: var(--accent); opacity: .45; stroke-dasharray: .02 .02; animation: none !important; }
.fc-line--lo { stroke: var(--muted-2); stroke-dasharray: .02 .02; animation: none !important; }
.reveal.is-in .fc-line--hi,
.reveal.is-in .fc-line--lo { animation: fade-in .6s var(--ease) .5s both !important; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0 } }
.fc-key { display: flex; gap: 14px; margin-top: 12px; }
.k { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.k::before { content: ""; width: 12px; height: 2px; border-radius: 2px; background: currentColor; }
.k--base { color: var(--accent); }
.k--hi::before { opacity: .5; }

/* ---- routines ---- */
.routine {
  display: grid;
  grid-template-columns: auto 14px minmax(0, 1fr) auto;
  gap: 9px; align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  margin-bottom: 8px;
  font-size: 12px;
}
.routine__when { font-family: var(--mono); font-size: 10px; letter-spacing: .05em; color: var(--muted); white-space: nowrap; }
.routine__arrow { color: var(--muted-2); }
.routine__do { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.routine__do b { color: var(--accent); font-weight: 550; }
.routine--alert .routine__when { color: #e0a04a; }
.sw { width: 26px; height: 15px; border-radius: 999px; background: var(--line-strong); position: relative; flex-shrink: 0; }
.sw i { position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 999px; background: var(--muted); transition: all .3s var(--ease); }
.sw--on { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); }
.reveal.is-in .sw--on i { left: 13px; background: var(--accent); }
.viz-routines__out {
  margin-top: 12px; padding: 11px 12px;
  border: 1px solid var(--accent-line); border-radius: 9px; background: var(--accent-soft);
}
.viz-routines__out p { margin: 5px 0 0; font-size: 12px; line-height: 1.45; color: var(--accent-ink); }
.viz-routines__out b { color: var(--accent); }

/* ---- analyst ---- */
.viz__ask { min-height: 40px; }
.caret { display: inline-block; width: 1.5px; height: 14px; background: var(--accent); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0 } }
.viz-analyst__rows { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--surface); }
.row {
  display: grid; grid-template-columns: minmax(0, 1.3fr) 1fr 1fr;
  gap: 8px; padding: 9px 12px; font-size: 12px;
  border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }
.row span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.row--head span {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-2);
}
.row .pos { color: var(--accent); }
.row .neg { color: #e0a04a; }
.viz-analyst__acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.act {
  padding: 7px 12px; border-radius: 8px; font-size: 12px;
  border: 1px solid var(--line-strong); color: var(--ink-2); background: var(--surface);
}
.act--primary { background: var(--accent); border-color: var(--accent); color: #0e1213; font-weight: 550; }

@media (prefers-reduced-motion: reduce) {
  .agent__viz [style*="--s"] { animation: none !important; opacity: 1; transform: none; }
  .reveal.is-in .bars i { transition: none; }
  .fc-line { stroke-dashoffset: 0 !important; animation: none !important; }
  .fc-chart { flex: 1 1 auto; }
  .caret { animation: none; }
}

/* Wide screens put the agents in a 2x2 grid, where headings of differing length
   would otherwise start each visual at a different height and leave them all
   different sizes. Equal card heights + a fixed visual box pinned to the bottom
   makes the four panels identical and aligned. */
@media (min-width: 1041px) {
  .agents { grid-auto-rows: 1fr; }
  .agent__viz {
    margin-top: auto;
    height: 304px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
  }
  .viz-reports__grid,
  .viz-analyst__rows,
  .viz-routines__out { flex-shrink: 0; }
  .fc-chart { flex: 1 1 auto; }
}

/* ================================================================ CUSTOMERS */
.quote__grid {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(28px, 4vw, 56px);
  margin-top: 44px;
  align-items: start;
}
.quote {
  padding: 34px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16,16,20,.04), 0 10px 30px -18px rgba(16,16,20,.14);
}
.quote p {
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.55;
  letter-spacing: -0.017em;
  color: var(--ink);
  font-weight: 450;
}
.quote__by { display: flex; align-items: center; gap: 11px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.quote__by .av { width: 40px; height: 40px; font-size: 12px; }
.quote__name {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -0.014em;
}

/* Profile link next to a name — muted until hovered, so it reads as a
   secondary affordance rather than a badge. */
.social {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  color: var(--muted-2);
  transition: color .18s var(--ease);
}
.social svg { width: 100%; height: 100%; display: block; }
.social:hover { color: var(--accent); }
.social:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
.quote__role { font-size: 12.5px; color: var(--muted); margin-top: 1px; }

.stats { display: grid; gap: 0; border-top: 1px solid var(--line); }
.stat { padding: 22px 2px; border-bottom: 1px solid var(--line); }
.stat__v { font-size: clamp(30px, 3.6vw, 40px); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.stat__l { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--accent); margin-top: 10px; }
.stat__d { font-size: 13px; color: var(--muted); margin-top: 6px; }

/* ================================================================== PRICING */
.tiers { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tier {
  display: flex; flex-direction: column;
  padding: 28px 26px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.tier:hover { border-color: var(--line-strong); box-shadow: 0 10px 30px -18px rgba(16,16,20,.18); }
.tier--feature {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, var(--accent-soft) 0%, #fff 42%);
  box-shadow: 0 1px 2px rgba(16,16,20,.04), 0 14px 36px -20px rgba(31,58,44,.30);
}
.tier__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 24px; margin-bottom: 18px; }
.tier__tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent); background: #fff; border: 1px solid var(--accent-line);
  padding: 3px 8px; border-radius: 999px;
}
.tier__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.tier__price .amt { font-size: clamp(24px, 2.6vw, 30px); font-weight: 600; letter-spacing: -0.032em; }
.tier__price .per { font-size: 13px; color: var(--muted); }
.tier__price .from { min-height: 15px; font-size: 12px; color: var(--muted-2); width: 100%; margin-bottom: 2px; font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.tier__for { font-size: 13.5px; line-height: 1.5; color: var(--muted); margin: 14px 0 20px; min-height: 40px; }
.tier__inc { font-size: 12.5px; font-weight: 500; color: var(--ink-2); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.tier__list { margin: 14px 0 24px; flex: 1; }
.tier__list li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.tier__list .tick { flex-shrink: 0; margin-top: 3px; color: var(--accent); }
.tier .btn { width: 100%; }

/* ==================================================================== ABOUT */
.about__grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.about__quote {
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6; letter-spacing: -0.015em;
  color: var(--ink-2);
}
.about__quote + .about__quote { margin-top: 16px; }
.founder { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.founder .av { width: 48px; height: 48px; font-size: 13px; }

/* ====================================================================== FAQ */
.faq { margin-top: 40px; max-width: 820px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding: 20px 4px; background: none; border: 0; cursor: pointer;
  text-align: left; font-size: 16px; font-weight: 500; letter-spacing: -0.017em;
  transition: color .18s var(--ease);
}
.faq__q:hover { color: var(--accent); }
.faq__n { font-family: var(--mono); font-size: 10.5px; color: var(--muted-2); min-width: 22px; }
.faq__qt { display: flex; gap: 16px; align-items: baseline; }
.faq__ic { flex-shrink: 0; color: var(--muted); transition: transform .28s var(--ease), color .18s var(--ease); }
.faq__item.is-open .faq__ic { transform: rotate(45deg); color: var(--accent); }
.faq__a { overflow: hidden; height: 0; transition: height .3s var(--ease); }
.faq__a > div { padding: 0 56px 22px 42px; font-size: 14.5px; line-height: 1.65; color: var(--muted); max-width: 64ch; }

/* ================================================================== CONTACT */
.cta__grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.82fr);
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.cta__mail { display: inline-flex; align-items: center; gap: 7px; margin-top: 18px; font-size: 14px; color: var(--muted); }
.cta__mail a { color: var(--accent); font-weight: 500; }
.cta__mail a:hover { text-decoration: underline; }

.cal { padding: 20px; }
.cal__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal__dow {
  font-family: var(--mono); font-size: 9.5px; color: var(--muted-2);
  text-align: center; padding-bottom: 8px; text-transform: uppercase;
}
.cal__d {
  aspect-ratio: 1; display: grid; place-items: center;
  font-size: 12.5px; border-radius: 7px; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.cal__d.free { background: var(--accent-soft); color: var(--accent); font-weight: 550; cursor: pointer; }
.cal__d.free:hover { background: var(--accent); color: #fff; }
.cal__d.off { color: var(--muted-2); opacity: .45; }

/* =================================================================== FOOTER */
.foot { border-top: 1px solid var(--line); background: var(--bg-subtle); padding-block: 40px; }
.foot__inner { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-start; }
.foot__legal { font-size: 13px; color: var(--muted); line-height: 1.7; }
.foot__legal strong { color: var(--ink-2); font-weight: 550; display: block; margin-bottom: 4px; }
.foot__links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot__links a { font-size: 13.5px; color: var(--muted); }
.foot__links a:hover { color: var(--ink); }

/* ============================================================== RESPONSIVE */
@media (max-width: 1040px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .step { grid-template-columns: 1fr; gap: 28px; }
  .agents { grid-template-columns: 1fr; gap: 14px; }
  .step:nth-child(even) .step__visual { order: 0; }   /* keep copy first when stacked */
  .rollup { flex-direction: column; align-items: flex-start; }
  .outcomes { grid-template-columns: repeat(4, 1fr); }
  .outcome, .outcome--wide { grid-column: span 2; }
  .outcome--wide { flex-direction: column; gap: 0; align-items: stretch; }
  .outcome--wide .art { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
  /* Five cards in a two-up grid leave a hole; the last one takes the full row. */
  .outcomes > .outcome:last-child { grid-column: span 4; flex-direction: row; align-items: center; gap: 22px; }
  .outcomes > .outcome:last-child .outcome__body { flex: 1 1 50%; min-width: 0; }
  .outcomes > .outcome:last-child .art { flex: 1 1 50%; margin-top: 0; padding-top: 0; border-top: 0; }
  .why__top { grid-template-columns: 1fr; gap: 36px; }
  .chat { position: static; inset: auto; margin-top: 16px; }
  .pillar__panel { grid-template-columns: 1fr; gap: 32px; }
  .quote__grid { grid-template-columns: 1fr; }
  .about__grid { grid-template-columns: 1fr; }
  .cta__grid { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__cta .btn--ghost { display: none; }
  .nav__burger { display: inline-flex; }
  .pillars__tabs { grid-template-columns: repeat(2, 1fr); }
  .ptab { padding-block: 14px; }
}

@media (max-width: 680px) {
  :root { --gutter: 18px; }
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .orbit { max-width: 300px; --rin: 82px; --rout: 126px; }
  .orbit__core { width: 50px; height: 50px; border-radius: 13px; font-size: 14px; }
  .orbit__chip i { padding: 7px 11px; }
  .orbit__chip img { height: 17px; max-width: 46px; }
  .orbit__chip img[src*="fortnox"] { height: 18px; }
  .orbit__chip img[src*="stripe"]  { height: 12px; }
  .orbit__chip img[src*="pleo"] { width: 28px; height: 28px; margin: -5.5px; }
  /* Truncated project names defeat the point — give them the full row. */
  .prj {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "main main" "meter hrs";
    gap: 10px 12px;
    padding: 13px 14px;
  }
  .prj__main { grid-area: main; flex-wrap: wrap; }
  .prj__meter { grid-area: meter; }
  .prj__hrs { grid-area: hrs; }
  .prj__name { white-space: normal; overflow: visible; }
  .ov__foot { flex-wrap: wrap; gap: 4px 10px; }
  .slack__body { padding: 13px; }
  .agent { padding: 22px 18px 20px; }
  .agent__viz { padding: 13px; }
  .routine { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .routine__arrow { display: none; }
  .routine__when { grid-column: 1; }
  .routine__do { grid-column: 1; }
  .sw { grid-column: 2; grid-row: 1 / span 2; }
  .outcomes { grid-template-columns: 1fr; gap: 12px; }
  .outcome, .outcome--wide { grid-column: 1 / -1; }
  .outcome { padding: 22px 20px 20px; }
  /* Undo the full-row side-by-side rule inherited from the 1040px breakpoint. */
  /* The 1040px rule leaves `grid-column: span 4` on this card. On a one-column
     grid that spawns three implicit 0px columns, and `1 / -1` on the other
     cards only spans the *explicit* grid — so they came out 303px against this
     one's 339px. Resetting the span removes the implicit columns entirely. */
  .outcomes > .outcome:last-child {
    grid-column: 1 / -1;
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }
  .outcomes > .outcome:last-child .art {
    margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line);
  }
  .duo__tag { padding: 6px 10px; }
  .duo__role { font-size: 8.5px; letter-spacing: .06em; }
  .kpis { grid-template-columns: 1fr; }
  .kpi { border-right: 0; border-bottom: 1px solid var(--line); }
  .kpi:last-child { border-bottom: 0; }
  .chat { width: 100%; }
  .quote { padding: 26px 22px; }
  .faq__q { font-size: 15px; padding-block: 17px; }
  .faq__qt { gap: 12px; }
  .faq__a > div { padding: 0 8px 20px 38px; }
  .logos__inner { gap: 18px; }
  /* A third of the viewport is too narrow for "Burn multiple" on one line, and
     shrinking the type only moves the breakpoint rather than removing it. Let
     the label wrap instead, and reserve two lines so the values underneath stay
     on a common baseline across all three tiles. */
  .tile { padding: 9px 8px; }
  .tile span {
    font-size: 8px;
    letter-spacing: .03em;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.15;
    min-height: 2.3em;
  }

  .logos__set { flex-wrap: nowrap; gap: 18px; justify-content: center; }
  .logos__set img[alt="Bower"]    { height: 19px; }
  .logos__set img[alt="Trustly"]  { height: 18px; margin-bottom: -3.72px; }
  .logos__set img[alt="Trialbee"] { height: 16px; }
  .tbl th, .tbl td { padding: 9px 10px; font-size: 12px; }
  .pillar__list li { padding-right: 4px; }
  .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}