/* halie.ai
   Light only. One stylesheet, no build step, no script.

   Everything this page competes against is assembled in a funnel builder:
   centred stacks, shouty all-caps headings, four button colours, heavy drop
   shadows. So restraint is the positioning here. One accent, one button, five
   shadows on the whole site, and a section cadence that never varies. Looking
   like funded software is the cheapest differentiation available.

   There is deliberately no scroll-reveal system. An earlier version applied
   opacity:0 through a class hard-coded in the markup, which meant the hero
   panel and the price card were invisible with scripting disabled. Motion was
   not worth a page that can fail closed on its own conversion object. */

/* ---------- Type ---------- */

/* Manrope is a variable font, so one file covers 400 through 800. Self-hosted
   so the page makes no third party requests at all. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */

:root {
  --ink: #030f25;          /* Midnight Navy. Type colour, not a background. */
  --muted: #4a5568;        /* 7.5:1 on white, 6.9:1 on tint */
  --line: rgba(3, 15, 37, 0.08);
  --line-strong: rgba(3, 15, 37, 0.14);
  --tint: #f5f7fa;         /* the only non-white surface */

  /* Signal Cyan is the single interactive hue. Pure #02BFD5 is 2.2:1 on white,
     so it is reserved for borders, rules, dots and large numerals. Text gets
     one of the two darker steps. */
  --primary: #02bfd5;
  --primary-dk: #0296a8;   /* 3.5:1, large text and UI only */
  --primary-ink: #04707e;  /* 5.8:1, safe for body size */
  --primary-deep: #05606c; /* on cyan tints */


  /* ---------- THE CURRENT ----------
     One gradient stretched over the whole document: cyan is the top of the
     page, lime is the bottom. Every device below is a slice of that one ramp,
     sampled at that element's depth. Scroll the page and you travel along a
     single continuous gradient. That is the signature, and it is a decision a
     competitor cannot lift without obviously lifting it.

     Stops are linear sRGB interpolations between #02BFD5, #1CE8BC and #B4F92F.
     Do not eyeball new ones, interpolate.

     THE PAGE RAMP STOPS AT 0.85. Position 1.00 (#B4F92F) is authored once, as
     --lime, and referenced only inside .btn. */
  --c-000: #02bfd5;
  --c-125: #09c9cf;
  --c-250: #0fd4c9;
  --c-375: #16dec2;
  --c-500: #1ce8bc;
  --c-625: #42ec99;
  --c-750: #68f176;
  --c-850: #86f459;

  /* The only colours from the ramp's families that may ever be a letterform. */
  --ink-cy: #05606c;   /* 7.25:1 on white */
  --ink-tl: #0d5847;   /* 8.39:1 on white */
  --ink-lm: #354d06;   /* 9.48:1 on white */

  /* Revenue Lime is the CTA fill and nothing else. Lime text on white is 1.3:1.
     Navy on lime is 15:1, which is why the button works. The page ramp tops out
     at #86F459, a visible hue away, so the button is the only chartreuse object
     in the document. Grep b4f92f: hits belong inside .btn and nowhere else. */
  --lime: #b4f92f;
  --lime-hover: #c2fa52;

  --radius: 12px;
  --radius-card: 24px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --gut: 24px;
  --pad: 84px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font: 400 17px/1.65 Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gut); }

h1, h2, h3 { margin: 0; }

/* h2 used to be 72% of h1 and fired eight times. A page with eight climaxes
   has none. It is 53% now, and the only thing that comes near h1 is the closing
   band, 9,000px away. */
h1 {
  font-size: clamp(2.75rem, 6.2vw, 4.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.018em;
}

h2 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.016em;
}

h3 { font-size: 1.375rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.012em; }

a { color: var(--primary-ink); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--primary-dk); outline-offset: 3px; border-radius: 4px; }

/* The header is sticky at 68px, so anchored headings would otherwise land
   underneath it. */
#outcomes, #difference, #pricing, #inside, #integrations, #usage, #faq { scroll-margin-top: 88px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reel-track { animation: none; }
  .reel { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .spine.run::after { animation: none; display: none; }
  /* The node keeps a static ring, so the "this is live" signal survives. */
  .live { animation: none; box-shadow: 0 0 0 3px rgba(2, 191, 213, 0.28); }
  .btn, .btn svg { transition: none; }
}


/* Every section declares its slice of the ramp. This is the colour system. */
.hero         { --seg-a: var(--c-000); --seg-b: var(--c-250); --seg-ink: var(--ink-cy); }
.strip-band   { --seg-a: var(--c-125); --seg-b: var(--c-375); --seg-ink: var(--ink-cy); }
#outcomes     { --seg-a: var(--c-000); --seg-b: var(--c-500); --seg-ink: var(--ink-cy); }
.bridge-band  { --seg-a: var(--c-250); --seg-b: var(--c-500); --seg-ink: var(--ink-cy); }
#difference   { --seg-a: var(--c-375); --seg-b: var(--c-625); --seg-ink: var(--ink-tl); }
#pricing      { --seg-a: var(--c-500); --seg-b: var(--c-750); --seg-ink: var(--ink-tl); }
#inside       { --seg-a: var(--c-500); --seg-b: var(--c-850); --seg-ink: var(--ink-lm); }
#integrations { --seg-a: var(--c-625); --seg-b: var(--c-750); --seg-ink: var(--ink-lm); }
#usage        { --seg-a: var(--c-625); --seg-b: var(--c-750); --seg-ink: var(--ink-lm); }
#faq          { --seg-a: var(--c-625); --seg-b: var(--c-850); --seg-ink: var(--ink-lm); }
.close-band   { --seg-a: var(--c-750); --seg-b: var(--c-850); --seg-ink: var(--ink-lm); }
.who          { --seg-a: var(--c-250); --seg-b: var(--c-625); --seg-ink: var(--ink-tl); }

/* ---------- The three scales of the current ----------
   1. the spine   connects a sequence          "this happens in order, without you"
   2. the seam    marks a surface live         "a running account, not a screenshot"
   3. the crossing marks a ground change       "the flow carries on across it"

   The current always runs in the direction of reading. Vertical instances go
   top to bottom, horizontal go left to right, never backwards or diagonal.
   That one rule is why six applications read as one thing. */

.spine {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--seg-a), var(--seg-b));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
  pointer-events: none;
}

/* One highlight travels the spine. The product's claim is that it runs while
   you are not there, and a current with something moving down it is that claim
   read in half a second. Two instances on the page, so it stays a signal. */
.spine.run::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 32%;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.92) 50%, transparent);
  animation: current-run 9s cubic-bezier(0.55, 0, 0.45, 1) infinite;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  transform: translateY(-160%);
  transition: transform 120ms ease-out;
}

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

@keyframes current-run {
  from { transform: translateY(-150%); }
  to { transform: translateY(420%); }
}

/* Where the current does something. Ringed in page white so the line reads as
   passing behind it rather than stopping at it. Glyphs are navy, never white:
   white on cyan is 2.2:1, navy on any ramp point is at least 8.59:1. */
.node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--nd, var(--seg-a));
  box-shadow: 0 0 0 5px #fff;
  color: var(--ink);
}

.node svg { display: block; width: 23px; height: 23px; }

.seam {
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  z-index: 2;
  background: linear-gradient(90deg, var(--seg-a), var(--seg-b));
}

.crossing { height: 8px; background: linear-gradient(90deg, var(--seg-a), var(--seg-b)); }

/* ---------- Grounds ---------- */

.ground-tint { background: var(--tint); }
.ground-dark { background: var(--ink); color: #fff; }
.ground-dark .lead { color: rgba(255, 255, 255, 0.8); }
.ground-dark .tab { color: #fff; }
.ground-dark .micro { color: rgba(255, 255, 255, 0.6); }

/* ---------- Section cadence ----------
   Repeated identically in every section. Most of the reason a page reads as
   engineered rather than assembled is that this never varies.

   Longhand padding deliberately. These elements also carry .wrap, and a
   `padding: N 0` shorthand would reset .wrap's horizontal padding to zero,
   which only shows up below the max-width where there is no auto margin left
   to hide it. */

section.block { padding-top: var(--pad); padding-bottom: var(--pad); }

/* Was .eyebrow at rgba(3,15,37,.55), which is 4.26:1 and failed. This is
   7.25 to 9.48:1 depending on where the section sits on the ramp, and it
   carries a 4px slice of the current as its marker. */
.tab {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--seg-ink);
}

.tab::before {
  content: '';
  flex: none;
  width: 4px; height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--seg-a), var(--seg-b));
}

.head.mid .tab { justify-content: center; }

/* The one coloured word per argument heading. Deliberately NOT gradient text:
   background-clip on letterforms costs real contrast and is the move every
   generated hero on the internet makes. The word is solid #04707E at 5.8:1 and
   the current runs underneath it. */
.thread-word {
  color: var(--primary-ink);
  background-image: linear-gradient(90deg, var(--seg-a), var(--seg-b));
  background-size: 100% 6px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 0.08em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

.head { max-width: 760px; }
.head.mid { margin: 0 auto; text-align: center; }
.head h2 { max-width: 22ch; text-wrap: balance; }
.head.mid h2 { margin-inline: auto; }

.lead {
  max-width: 640px;
  margin: 20px 0 0;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  color: var(--muted);
}

.head.mid .lead { margin-inline: auto; }

.body-of-section { margin-top: 48px; }

/* ---------- Buttons ----------
   One button, one colour, one shape. Lime lives in this selector and nowhere
   else in the file. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  border: 0;
  border-radius: var(--radius);
  background: var(--lime);
  color: var(--ink);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  gap: 10px;
  /* A wide soft pool, not a drop shadow. translateY(-1px) is the most common
     hover in software and it is not what makes this button obvious. */
  box-shadow: 0 8px 44px -14px rgba(180, 249, 47, 0.9);
  transition: box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), background 0.18s var(--ease);
}

.btn:hover, .btn:focus-visible {
  background: var(--lime-hover);
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 10px 62px -12px rgba(180, 249, 47, 1), inset 0 -2px 0 rgba(3, 15, 37, 0.16);
}

.btn svg { width: 15px; height: 15px; transition: transform 0.18s var(--ease); }
.btn:hover svg, .btn:focus-visible svg { transform: rotate(-45deg); }

.btn-ghost { box-shadow: none; }
.btn-ghost:hover, .btn-ghost:focus-visible { box-shadow: none; }

.btn-sm { padding: 10px 20px; font-size: 15px; }

/* The ghost is for log in and nothing else. It overrides the lime fill rather
   than declaring a second one, so lime is still authored in exactly one place.
   No cyan here either: a coloured secondary button next to the primary is how
   a page ends up with two things competing to be clicked. */
.btn-ghost {
  background: transparent;
  border: 0;
  color: var(--ink);
  font-weight: 600;
}

.btn-ghost:hover, .btn-ghost:focus-visible {
  background: var(--tint);
  color: var(--ink);
  transform: none;
}

.micro { margin: 16px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }

/* ---------- Header ---------- */

header.site {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 1px 0 var(--line);
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 68px;
}

.logo { display: flex; align-items: center; }
.logo img { height: 30px; width: auto; display: block; }
.logo:hover { text-decoration: none; }

header.site nav { display: flex; align-items: center; gap: 30px; font-size: 15px; }
header.site nav a.txt { color: var(--ink); font-weight: 500; opacity: 0.75; }
header.site nav a.txt:hover { opacity: 1; text-decoration: none; }

/* ---------- Hero ----------
   Centred single column, one call to action, then the product surface at full
   width cropped by the fold. The crop is the point: a panel that runs off the
   bottom of the screen reads as a real screen rather than an illustration. */

.hero { position: relative; padding-top: 56px; padding-bottom: 0; text-align: center; }

/* The only place the gradient touches a surface. At 7% it reads as light
   rather than as a coloured band. */
.hero::before {
  content: '';
  position: absolute;
  inset: -140px 0 auto;
  height: 920px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(128% 64% at 50% -48%,
      transparent 56%,
      rgba(2, 191, 213, 0.42) 70%,
      rgba(28, 232, 188, 0.30) 78%,
      rgba(2, 191, 213, 0.10) 87%,
      transparent 94%);
}

.hero h1 { max-width: none; margin-inline: auto; }
/* One text colour in the hero. A grey lead under a bold headline reads as an
   apology after a statement. */
.hero .lead { max-width: 58ch; margin: 20px auto 0; font-size: clamp(1.1875rem, 1.8vw, 1.375rem); color: var(--ink); }
.hero .actions { margin-top: 26px; }

.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Reassurance inline under the button, separated by hairlines rather than set
   in a box. Deliberately not a badge or a rosette: every funnel page in this
   category carries one, which makes it the strongest available signal that
   this page belongs to that category. */
.hero .assure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 0;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}

.hero .assure li { display: inline-flex; align-items: center; }
.hero .assure li + li::before {
  content: '';
  width: 1px;
  height: 13px;
  margin: 0 18px;
  background: var(--line-strong);
}

.hero-stage { max-width: 1200px; margin: 38px auto 0; padding: 0 var(--gut); text-align: left; }

.app { height: 470px; }
.app-body { position: relative; display: grid; grid-template-columns: 208px 336px minmax(0, 1fr); height: 422px; overflow: hidden; }
.app-body > .spine { left: 0; border-radius: 0; z-index: 3; }

.rail { margin: 0; padding: 14px 12px; list-style: none; border-right: 1px solid var(--line); background: #fbfcfd; }
.rail li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--muted);
}
.rail li em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--primary-ink); font-variant-numeric: tabular-nums; }
.rail li.on { background: rgba(2, 191, 213, 0.1); color: var(--primary-deep); font-weight: 600; }

/* ---------- The ledger ----------
   Seven rows, ruled, no tiles. A grid of labelled boxes reads as a feature
   inventory and makes the eye compare tiles against each other. A ruled column
   reads as a list of charges, and the reader runs down it in one movement
   recognising their own week. The feature name is the quiet right hand column:
   there for whoever wants it, ignorable by whoever does not. */

/* Slightly tighter than the standard cadence: this section is seven rows deep
   and every pixel here delays the price card. */
#outcomes { padding-top: 68px; padding-bottom: 68px; }

.ledger-wrap { position: relative; max-width: 1000px; margin-inline: auto; }
.ledger { position: relative; margin: 0; padding: 0; list-style: none; }
.ledger-wrap > .spine { left: 19px; }

.ledger li {
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 232px;
  gap: 24px;
  align-items: start;
  padding: 22px 0;
  /* Real ink, dashed. rgba(3,15,37,.08) hairlines are the most generic texture
     in B2B SaaS and this file used them fifteen times. */
  border-top: 1px dashed rgba(3, 15, 37, 0.18);
}

.ledger li:first-child { border-top: 0; }

/* Seven independent problems, so the nodes barely advance along the ramp. The
   lifecycle log is a real sequence, so its nodes step visibly. That difference
   is what stops the device becoming decoration. */
.ledger li:nth-child(1) .node { --nd: #02bfd5; }
.ledger li:nth-child(2) .node { --nd: #06c6d1; }
.ledger li:nth-child(3) .node { --nd: #0bcdcd; }
.ledger li:nth-child(4) .node { --nd: #0fd4c9; }
.ledger li:nth-child(5) .node { --nd: #13dac4; }
.ledger li:nth-child(6) .node { --nd: #18e1c0; }
.ledger li:nth-child(7) .node { --nd: #1ce8bc; }

.say b { display: block; font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.012em; }
.say > span { display: block; max-width: 52ch; margin-top: 7px; font-size: 16px; line-height: 1.55; color: var(--muted); }

.receipt { font-size: 13px; line-height: 1.5; color: var(--muted); text-align: right; }

/* The highest intent moment on the page: the reader has just recognised seven
   of their own bad afternoons and would otherwise have nowhere to go. */
/* The highest intent moment on the page: the reader has just recognised seven
   of their own bad afternoons. It used to sit in undifferentiated white. */
.bridge-band { padding-top: 56px; padding-bottom: 56px; text-align: center; }
.bridge-band .bridge {
  max-width: 24ch;
  margin: 0 auto 24px;
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: #fff;
}
.bridge-band .micro { max-width: 44ch; margin-inline: auto; }

/* ---------- Two column cards ----------
   Used on the affiliate page. Not on the landing page, where a pair of bordered
   boxes full of parallel sentences was cut for being exactly the shape this
   site avoids. */

/* Two boxes of parallel sentences is the exact shape the landing page cut for
   being generic. No cards: two columns of one flow, with the current running
   between them. */
.who { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; }

.who::before {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 6px;
  margin-left: -3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--seg-a), var(--seg-b));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 6%, #000 94%, transparent);
}

.who .card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.who h3 { margin-bottom: 18px; }
.who ul { margin: 0; padding: 0; list-style: none; }
.who li { padding: 13px 0; border-top: 1px dashed rgba(3, 15, 37, 0.18); font-size: 16px; line-height: 1.55; color: var(--muted); }
.who li:first-child { border-top: 0; padding-top: 0; }

/* ---------- Published program rules ----------
   The whole proof strategy for a program with no track record: publish the
   numbers other programs bury in a PDF. */

.terms-grid { max-width: 820px; margin-inline: auto; }
.terms-grid > div {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.terms-grid > div:last-child { border-bottom: 1px solid var(--line); }
.terms-grid dt { font-size: 15px; font-weight: 700; }
.terms-grid dd { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }

.ex-note {
  max-width: 66ch;
  margin: 34px auto 0;
  padding: 22px 26px;
  border-radius: var(--radius-card);
  background: var(--tint);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--muted);
}
.ex-note b { color: var(--ink); font-weight: 700; }

/* ---------- Integration reels ----------
   Two rows scrolling in opposite directions. Pure CSS, no script: the set is
   duplicated once inside the track and the track translates by exactly -50%,
   which means the second set lands where the first started and the loop has no
   seam. The mask dissolves both edges instead of hard clipping them.

   Names are set as type rather than shipped as logo files. That keeps the page
   at zero external requests, avoids hosting eighteen third party trademarks,
   and avoids implying an endorsement none of them have given. */

/* Sits immediately under the hero. */
.strip-band { padding-top: 44px; padding-bottom: 8px; }
.strip-lbl {
  margin: 0 0 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--seg-ink);
  text-align: center;
}

.reels { margin-bottom: 0; }

.reel {
  position: relative;
  overflow: hidden;
  padding: 14px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

/* The current runs the width of the reel and the names ride it. The white
   padding on each name punches a hole in the line, so they sit ON it. A logo
   wall without logos was worse than either option. */
.reel::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--seg-a), var(--seg-b));
  opacity: 0.62;
}

.reel + .reel::before { background: linear-gradient(270deg, var(--seg-a), var(--seg-b)); }

.reel + .reel { margin-top: 14px; }

.reel-track {
  position: relative;
  display: flex;
  width: max-content;
  animation: reel 52s linear infinite;
}

.reel-track.rev { animation-duration: 64s; animation-direction: reverse; }

/* Hovering or tabbing into the row stops it, so nobody has to chase a name. */
.reel:hover .reel-track,
.reel:focus-within .reel-track { animation-play-state: paused; }

.reel-set { display: flex; align-items: center; gap: 0; padding-right: 0; }

.mark {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  padding: 6px 15px;
  border: 0;
  background: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

@keyframes reel {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}



/* ---------- Integrations ---------- */

.integ { max-width: 760px; margin-inline: auto; }
.integ-row { margin: 0; padding: 15px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.6; color: var(--muted); }
.integ-row b { color: var(--ink); font-weight: 600; }
.integ-row:last-of-type { border-bottom: 1px solid var(--line); }
.integ-note { margin: 26px 0 0; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* ---------- Product surfaces ----------
   Built in markup rather than shipped as screenshots: they stay sharp at any
   width, they weigh nothing, and they cannot accidentally leak a menu item
   belonging to somebody else's brand. */

.ui {
  position: relative;
  border: 0;
  border-radius: 20px;
  background: #fff;
  overflow: hidden;
  /* Two-part shadow, a contact plus a lift. A single wide blur is the generic
     tell. The seam is the edge, so there is no border. */
  box-shadow: 0 1px 2px rgba(3, 15, 37, 0.05), 0 14px 38px -10px rgba(3, 15, 37, 0.12);
}

/* The fold is the crop. An unrounded bottom edge is what makes the hero panel
   read as a real screen continuing below the viewport. */
.hero .ui { border-radius: 24px 24px 0 0; }

.ui-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfd;
}

/* Three grey traffic-light dots were the single most template-coded element in
   the markup. Every funnel export has them. One live node says the opposite:
   this is a running account, not a screenshot. */
.live {
  flex: none;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--seg-a);
  animation: live 2.6s var(--ease) infinite;
}

@keyframes live {
  0% { box-shadow: 0 0 0 0 rgba(2, 191, 213, 0.5); }
  70% { box-shadow: 0 0 0 9px rgba(2, 191, 213, 0); }
  100% { box-shadow: 0 0 0 0 rgba(2, 191, 213, 0); }
}

.ui-bar .ui-title { font-size: 13px; font-weight: 700; letter-spacing: -0.01em; }
.ui-bar .ui-pill {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 980px;
  background: rgba(2, 191, 213, 0.12);
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-deep);
}

/* Specificity, not source order, so reordering the sheet can never turn the
   empty account's pill cyan and kill the hierarchy signal. */
.ui-bar .ui-pill.flat { background: rgba(3, 15, 37, 0.06); color: var(--muted); }

.ui-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  background: #fbfcfd;
  font-size: 13px;
  color: var(--muted);
}

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

/* Inbox */

.threads { margin: 0; padding: 0; list-style: none; }

.thread {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.thread:last-child { border-bottom: 0; }

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

/* Eight arbitrary hues become the ramp, so the inbox reads as a visible
   gradient of people. Initials are navy, never white: white on cyan is 2.2:1,
   navy on any ramp point is at least 8.59:1. */
.av-1 { background: var(--c-000); }
.av-2 { background: var(--c-125); }
.av-3 { background: var(--c-250); }
.av-4 { background: var(--c-375); }
.av-5 { background: var(--c-500); }
.av-6 { background: var(--c-625); }
.av-7 { background: var(--c-750); }
.av-8 { background: #22456b; color: #fff; }

.t-main { min-width: 0; }
.t-main b { display: block; font-size: 15px; font-weight: 600; }
.t-msg { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.t-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.t-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Seven pastel candy colours actively undercut the argument, which is that
   everything lands in ONE place. One neutral treatment, and a tick of the
   current to say which source it came in on. Seven sources, visibly threaded
   on the same current, arriving in one inbox. */
.ch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 6px;
  border-radius: 5px;
  background: rgba(3, 15, 37, 0.05);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.ch::before {
  content: '';
  flex: none;
  width: 3px; height: 10px;
  border-radius: 2px;
  background: var(--tick);
}

.ch-call { --tick: var(--c-000); }
.ch-sms { --tick: var(--c-125); }
.ch-chat { --tick: var(--c-250); }
.ch-fb { --tick: var(--c-375); }
.ch-ig { --tick: var(--c-500); }
.ch-form { --tick: var(--c-625); }
.ch-email { --tick: var(--c-750); }

.app-body .threads { border-right: 1px solid var(--line); }
.app-body .thread { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; padding: 13px 16px; }
.app-body .avatar { width: 34px; height: 34px; border-radius: 9px; font-size: 12px; }
.thread.on { background: #fbfcfd; box-shadow: inset 2px 0 0 var(--primary); }

/* Conversation pane */

.convo { display: flex; flex-direction: column; min-width: 0; }
.convo-h { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.convo-h b { font-size: 15px; font-weight: 600; }
.convo-sub { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.convo-h .ch { margin-left: auto; }

.msgs { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 16px 20px; list-style: none; }
.msgs li { display: flex; flex-direction: column; max-width: 84%; }
.msgs p { margin: 0; padding: 10px 13px; font-size: 13.5px; line-height: 1.45; }
.msgs .in { align-self: flex-start; align-items: flex-start; }
.msgs .in p { border: 1px solid var(--line); border-radius: 12px 12px 12px 4px; background: #fff; }
.msgs .out { align-self: flex-end; align-items: flex-end; }
.msgs .out p { border: 1px solid rgba(2, 191, 213, 0.28); border-radius: 12px 12px 4px 12px; background: rgba(2, 191, 213, 0.07); }

.m-meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.auto { padding: 2px 7px; border-radius: 5px; background: rgba(2, 191, 213, 0.12); font-weight: 600; color: var(--primary-deep); }

.msgs .ev {
  flex-direction: row;
  align-items: center;
  max-width: 100%;
  padding: 8px 11px;
  border: 1px solid rgba(2, 191, 213, 0.32);
  border-radius: 8px;
  background: rgba(2, 191, 213, 0.06);
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-deep);
}

/* Pipeline board */

.pipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pipe-col { border-right: 1px solid var(--line); padding: 0 0 14px; }
.pipe-col:last-child { border-right: 0; }

/* New, Quoted, Booked, Won reads as movement along the ramp. This is the
   wedge's argument, in colour. */
.pipe-col:nth-child(1) .pipe-h { --stage: var(--c-375); }
.pipe-col:nth-child(2) .pipe-h { --stage: var(--c-500); }
.pipe-col:nth-child(3) .pipe-h { --stage: var(--c-625); }
.pipe-col:nth-child(4) .pipe-h { --stage: var(--c-750); }

.pipe-h::before {
  content: '';
  position: absolute;
  inset: 0 12px auto;
  height: 4px;
  border-radius: 2px;
  background: var(--stage);
}

.pipe-h {
  position: relative;
  padding-top: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 13px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.pipe-h span { padding: 1px 7px; border-radius: 980px; background: var(--tint); font-size: 11px; }

.deal { margin: 8px 10px 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-size: 12.5px; line-height: 1.35; }
.deal b { display: block; font-weight: 600; }
.deal .val { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.deal.won { border-color: rgba(104, 241, 118, 0.55); background: rgba(104, 241, 118, 0.1); }

/* ---------- The wedge ----------
   Two accounts, same four column geometry, same Day 1 pill, one empty and one
   running. Stacked rather than side by side so the comparison is identical at
   every width and the reader never meets the rival panel first. */

.wedge { margin-top: 32px; }
.wedge .ui + .wedge-cap { margin-top: 10px; }
.wedge .wedge-cap + .ui { margin-top: 26px; }
.wedge-cap { text-align: center; }

/* No seam, no live node, no ramp colour anywhere. The absence is the
   argument. Do not add one back for consistency. */
.acct-empty { box-shadow: none; background: #fdfdfe; border: 1px solid var(--line); }
.acct-empty .live { display: none; }

.grp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 9px 18px;
  background: #fbfcfd;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.grp em { font-style: normal; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }

/* 2px, not 1px: at a hairline over a 2.5% wash the mark carrying the entire
   argument is invisible on a phone in daylight. */
.hollow {
  display: grid;
  place-content: center;
  min-height: 164px;
  margin: 12px 18px;
  padding: 20px 12px;
  border: 2px dashed var(--line-strong);
  border-radius: 10px;
  background: rgba(3, 15, 37, 0.025);
  text-align: center;
}

.hollow p { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.hollow .sub { margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--muted); }

/* ---------- Lifecycle card ----------
   One lead followed through all five stages. The argument is in the timestamp
   column: nine seconds, five minutes, 36 hours, seven minutes, six months, and
   a human present at none of them. */

/* Narrower than the full container so the third track does not inherit a
   600px dead gap from the free space. */
#inside .ui { max-width: 940px; margin-inline: auto; }

.life { position: relative; margin: 0; padding: 0; list-style: none; }
.life > .spine { left: 26px; }

/* This block IS a sequence in time, so here the current advances. */
.phase:nth-child(1) { --nd: #1ce8bc; }
.phase:nth-child(2) { --nd: #33eba7; }
.phase:nth-child(3) { --nd: #4aed92; }
.phase:nth-child(4) { --nd: #60f07d; }
.phase:nth-child(5) { --nd: #77f267; }

.phase::before {
  content: '';
  position: absolute;
  left: 19px; top: 15px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--nd);
  box-shadow: 0 0 0 5px #fbfcfd;
}

.phase { position: relative; display: grid; grid-template-columns: 136px minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.phase:last-child { border-bottom: 0; }

.phase .stage {
  margin: 0;
  padding: 14px 16px 14px 64px;
  border-right: 1px solid var(--line);
  background: #fbfcfd;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink);
}

.evs { margin: 0; padding: 0; list-style: none; }
.evs > li {
  display: grid;
  grid-template-columns: 96px 232px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
}
.evs > li:last-child { border-bottom: 0; }

.when { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.did { display: inline-flex; align-items: center; gap: 7px; grid-column: 2; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.did::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--nd, var(--seg-a)); flex: none; }
.what { min-width: 0; font-size: 15px; line-height: 1.45; grid-column: 3; }

.ast { color: var(--primary-ink); font-weight: 700; }

/* ---------- Chips ----------
   A chip grid reads as a capability surface. This block is honestly a list,
   which is why it sits after the price rather than before it: parity checking
   happens when the buyer is already at the number. */

/* It is honestly a list, so it is set as one. Thirteen grey pills wrapping
   into a badge wall was the most funnel-coded object left in the file, and this
   is both less generic and shorter. */
.chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chips li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px dashed rgba(3, 15, 37, 0.18);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
}

.chips li::before {
  content: '';
  flex: none;
  margin-top: 5px;
  width: 3px; height: 15px;
  border-radius: 2px;
  background: var(--tick, var(--seg-a));
}

.chips li:nth-child(3n+1) { --tick: var(--c-500); }
.chips li:nth-child(3n+2) { --tick: var(--c-625); }
.chips li:nth-child(3n+3) { --tick: var(--c-750); }

.chips li .ast { margin-left: 5px; }

.kit { max-width: 860px; margin: 44px auto 0; }
.kit .tab { justify-content: center; }
.kit .micro { text-align: center; }

/* ---------- Pricing ---------- */

.price-card {
  position: relative;
  max-width: 560px;
  margin: 44px auto 0;
  padding: 48px 44px 40px;
  /* A 2px cyan border plus a cyan shadow plus a gradient rule was three
     emphasis devices on one object, which is how an object ends up looking
     cheap. One device now: the seam. */
  border: 0;
  border-radius: var(--radius-card);
  background: #fff;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 0 46px rgba(3, 15, 37, 0.07);
}

.price-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: linear-gradient(90deg, var(--seg-a), var(--seg-b));
}

/* Square edge flush to the card, rounded edge inward, so it reads as a label
   stuck on. Not lime: it carries no click affordance and must never look like
   one. Navy on #42EC99 is 12.5:1. */
.price-card .ribbon {
  position: absolute;
  top: 22px; right: 0;
  padding: 7px 15px;
  border-radius: 10px 0 0 10px;
  background: var(--c-625);
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.02em;
}

.amount { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 0; }
.amount .fig { font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.amount .per { font-size: 18px; font-weight: 400; color: var(--muted); }

.price-card .persona { max-width: 46ch; margin: 18px auto 0; font-size: 16px; line-height: 1.55; color: var(--muted); }

.incl { margin: 30px 0 32px; padding: 26px 0 0; border-top: 1px solid var(--line); list-style: none; text-align: left; }
.incl li { position: relative; padding: 0 0 13px 30px; font-size: 16px; line-height: 1.5; }
.incl li:last-child { padding-bottom: 0; }

/* A drawn tick rather than a glyph, so it never renders as a checkbox. */
.incl li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 6px;
  width: 12px;
  height: 7px;
  border-left: 2.5px solid var(--ink-tl);
  border-bottom: 2.5px solid var(--ink-tl);
  transform: rotate(-45deg);
}

.price-card .btn { width: 100%; }

/* Promoted out of grey. At $97 self serve the dominant hesitation is exit
   cost, not value, and that answer should not be the least legible thing
   after the button. */
.price-card .assure { margin: 18px 0 0; font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.price-card .assure b { font-weight: 700; }

/* ---------- Usage ---------- */

.usage { max-width: 780px; margin-inline: auto; }
.usage p { font-size: 17px; line-height: 1.65; color: var(--muted); }
.usage p + p { margin-top: 18px; }
.usage strong { color: var(--ink); font-weight: 600; }

/* ---------- FAQ ---------- */

.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 56px; margin-top: 44px; text-align: left; }
.faq .q { margin: 0 0 9px; font-size: 18px; font-weight: 700; line-height: 1.35; letter-spacing: -0.012em; }
.faq .a { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
.faq-ask { max-width: 58ch; margin: 36px auto 0; text-align: center; font-size: 16px; line-height: 1.6; color: var(--muted); }

/* ---------- Closing band ----------
   The single dark moment on the site. The lime button inside it is the highest
   contrast element on the page by a wide margin, and there is nothing else in
   the band to look at. Adding anything costs the button its monopoly. */

.close-band { position: relative; background: var(--ink); padding: 76px 0; text-align: center; }

.close-band h2 {
  max-width: 24ch;
  margin: 0 auto;
  font-size: clamp(2.25rem, 5.2vw, 3.5rem);
  font-weight: 800;
  line-height: 1.02;
  color: #fff;
}
.close-band .lead { max-width: 44ch; margin: 18px auto 0; color: rgba(255, 255, 255, 0.78); }
.close-band .actions { margin-top: 34px; }
.close-band .micro { margin-top: 20px; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); }
.close-band .micro b { color: #fff; font-weight: 700; }

/* ---------- Footer ---------- */

footer.site { padding-top: 64px; padding-bottom: 56px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }
footer.site .cols { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
footer.site .brand img { height: 26px; width: auto; display: block; }
footer.site .brand p { margin: 18px 0 0; max-width: 34ch; font-size: 14.5px; line-height: 1.6; }
footer.site h4 { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
footer.site ul { margin: 0; padding: 0; list-style: none; }
footer.site li { margin-bottom: 9px; }
footer.site a { color: var(--muted); }
footer.site a:hover { color: var(--ink); }
footer.site address { font-style: normal; line-height: 1.7; }
footer.site .base { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line); font-size: 13.5px; }

/* ---------- Legal pages ---------- */

.legal { max-width: 780px; padding-top: 72px; padding-bottom: 64px; }
.legal h1 { font-size: clamp(2rem, 4.4vw, 2.875rem); margin-bottom: 12px; }
.legal .updated { margin: 0 0 44px; color: var(--muted); font-size: 16px; }
.legal h2 { margin-top: 48px; margin-bottom: 14px; font-size: 1.5rem; font-weight: 700; }
.legal p, .legal li { font-size: 16.5px; line-height: 1.7; color: var(--muted); }
.legal li { margin-bottom: 10px; }
.legal .back { display: inline-block; margin-bottom: 34px; font-size: 15px; font-weight: 600; }

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .app { height: 488px; }
  .app-body { grid-template-columns: 190px 300px minmax(0, 1fr); height: 440px; }
}

/* The third lifecycle track yields before it forces three rows to two lines on
   a laptop. */
@media (max-width: 1150px) {
  .evs > li { grid-template-columns: 96px minmax(0, 200px) minmax(0, 1fr); gap: 14px; }
}

@media (max-width: 980px) {
  :root { --pad: 72px; }
  .hero { padding-top: 52px; }
  .hero-stage { margin-top: 32px; }
  .app { height: 470px; }
  .app-body { grid-template-columns: 300px minmax(0, 1fr); height: 422px; }
  .rail { display: none; }
  .faq { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  footer.site .cols { grid-template-columns: 1fr 1fr; gap: 34px; }
  footer.site .brand { grid-column: 1 / -1; }
  .integ { max-width: none; }
  .terms-grid > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .who { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .who::before {
    left: 0; right: 0; top: 50%; bottom: auto;
    width: auto; height: 6px; margin: -3px 0 0;
    background: linear-gradient(90deg, var(--seg-a), var(--seg-b));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
}

@media (max-width: 900px) {
  .ledger li { grid-template-columns: 88px minmax(0, 1fr); gap: 8px 20px; }
  .receipt { grid-column: 2; margin-top: 10px; text-align: left; }
  .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .evs > li { grid-template-columns: 96px minmax(0, 1fr); gap: 5px 16px; }
  .did { white-space: normal; }
  .what { grid-column: 2; }
}

@media (max-width: 640px) {
  :root { --gut: 20px; --pad: 64px; }
  body { font-size: 16.5px; }

  header.site .wrap { height: 60px; }
  header.site nav { gap: 14px; }
  header.site nav a.txt { display: none; }
  header.site .btn-sm { padding: 9px 14px; font-size: 14px; }
  .logo img { height: 22px; }

  /* Stays a ghost button at every width. It gets tighter, not plainer. */
  header.site .btn-ghost { padding: 9px 11px; }

  .hero { padding-top: 52px; padding-bottom: 0; }
  .hero h1 { max-width: none; }
  .hero .lead { max-width: none; }
  .hero .assure { flex-direction: column; gap: 7px; }
  .hero .assure li + li::before { display: none; }
  .actions .btn, .price-card .btn { width: 100%; }

  /* No fixed height on reflowing text: on desktop the crop is deliberate, on
     mobile clipping the outcome row would be a bug. */
  .app { height: auto; }
  .app-body { grid-template-columns: minmax(0, 1fr); height: auto; }
  .app-body .threads { display: none; }
  .convo-h { flex-wrap: wrap; row-gap: 3px; padding: 12px 14px; }
  .convo-sub { flex: 1 0 100%; order: 3; }
  .msgs { padding: 14px; gap: 10px; }
  .msgs li { max-width: 92%; }

    .wedge { margin-top: 28px; }
  .hollow { margin: 12px 14px; min-height: 140px; }
  .body-of-section { margin-top: 40px; }

  .thread { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 11px; padding: 12px 14px; }
  .avatar { width: 32px; height: 32px; border-radius: 9px; font-size: 12px; }
  .ui-bar, .ui-foot { padding-left: 14px; padding-right: 14px; }

  .pipe { grid-template-columns: 1fr 1fr; }
  .pipe-col:nth-child(2) { border-right: 0; }
  .pipe-col:nth-child(-n+2) { border-bottom: 1px solid var(--line); }

  .phase { grid-template-columns: minmax(0, 1fr); }
  .phase .stage { border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 16px; }
  .evs > li { grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; padding: 12px 16px; }
  .did { justify-self: end; text-align: right; }
  .what { grid-column: 1 / -1; }

  .say b { font-size: 18px; }
  .chips { grid-template-columns: minmax(0, 1fr); }
  .bridge-band { padding-top: 46px; padding-bottom: 46px; }
  .node { width: 38px; height: 38px; border-radius: 12px; }
  .node svg { width: 20px; height: 20px; }
  .ledger-wrap > .spine, .life > .spine { left: 16px; }
  .ledger li { grid-template-columns: 62px minmax(0, 1fr); }
  .phase .stage { padding-left: 56px; }
  .phase::before { left: 6px; }
  .price-card { padding: 36px 24px 32px; }
  .amount .fig { font-size: 54px; }
  .close-band { padding: 64px 0; }
}