/* getfluxy.io — one stylesheet for the landing and the legal pages.
   Tokens follow the Fluxy UI kit (console.getfluxy.io shares them). */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("fonts/BricolageGrotesque-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Onest";
  src: url("fonts/Onest-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #fbf7fa;
  --surface: #ffffff;
  --surface-2: #f7f0f5;
  --stage: #f4e9f1;
  --fg: #24131f;
  --muted: #715d6b;
  --faint: #7a6775;
  --line: #ecdde7;
  --line-2: #dfcad8;
  --brand: #7a2e6a;
  --brand-hover: #68245a;
  --brand-ink: #7a2e6a;
  --brand-dark: #561f4b;
  --brand-2: #9b3f88;
  --on-brand: #ffffff;
  --pink: #f5e6f0;
  --pink-2: #eacfe1;
  --rose: #cf5fa6;
  --ok: #22804e;
  --ok-bg: #e2f3e9;
  --warn: #9a5d0c;
  --warn-bg: #fbefd9;
  --shadow: 0 1px 2px rgba(70, 20, 55, 0.06), 0 18px 40px -18px rgba(70, 20, 55, 0.25);
  --hi: inset 0 1px 0 rgba(255, 255, 255, 0);
  --glow: 0 8px 22px -10px rgba(122, 46, 106, 0.55);
  --aura:
    radial-gradient(1000px 520px at 85% -10%, rgba(207, 95, 166, 0.16), transparent 60%),
    radial-gradient(800px 480px at 0% 0%, rgba(122, 46, 106, 0.1), transparent 60%);
  --font-display: "Bricolage Grotesque", "Onest", system-ui, sans-serif;
  --font-ui: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 140ms;
  --d-base: 220ms;
  --d-slow: 380ms;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --sec: clamp(64px, 8vw, 104px);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0911;
    --surface: #15111d;
    --surface-2: #1c1726;
    --stage: #100d17;
    --fg: #f4f0fa;
    --muted: #ada5bd;
    --faint: #87809b;
    --line: #272033;
    --line-2: #352c44;
    --brand: #a44e98;
    --brand-hover: #ad53a1;
    --brand-ink: #edb3e0;
    --brand-dark: #3d1836;
    --brand-2: #8f3f80;
    --pink: #2a1835;
    --pink-2: #432757;
    --rose: #e88bcb;
    --ok: #5cc68c;
    --ok-bg: rgba(92, 198, 140, 0.13);
    --warn: #e6aa52;
    --warn-bg: rgba(230, 170, 82, 0.12);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 18px 44px -18px rgba(0, 0, 0, 0.85);
    --hi: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --glow: 0 8px 26px -10px rgba(200, 90, 180, 0.6);
    --aura:
      radial-gradient(1100px 560px at 85% -10%, rgba(164, 78, 152, 0.28), transparent 62%),
      radial-gradient(900px 480px at 0% 0%, rgba(104, 84, 214, 0.16), transparent 60%);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font: 16px/1.6 var(--font-ui);
  color: var(--fg);
  background-color: var(--bg);
  background-image: var(--aura);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--brand-ink);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

:focus-visible {
  outline: 2px solid var(--rose);
  outline-offset: 2px;
}

h1,
h2,
h3 {
  margin: 0;
  text-wrap: balance;
}

.wrap {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}

.mono {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--faint);
}

.muted {
  color: var(--muted);
}

/* --- header -------------------------------------------------------------- */

/* At the top of the page the header is a bar across the whole width. Once
   the page has scrolled it draws itself in to a floating pill — same height
   overall (56px pill + 12px above), so the content below never jumps. */
header.site {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid; /* keeps the pill's top margin inside the header, so its height never changes */
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition:
    background-color var(--d-slow),
    border-color var(--d-slow);
}

header.site .wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  width: 100%;
  height: 68px;
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  transition:
    max-width 0.5s var(--ease-out),
    height 0.5s var(--ease-out),
    margin 0.5s var(--ease-out),
    padding 0.5s var(--ease-out),
    border-radius 0.5s var(--ease-out),
    background-color 0.35s,
    border-color 0.35s,
    box-shadow 0.35s;
}

header.site.scrolled {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

header.site.scrolled .wrap {
  max-width: 940px;
  height: 56px;
  margin: 12px auto 0;
  padding: 0 10px 0 18px;
  border-radius: 999px;
  border-color: var(--line);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.brand:hover {
  text-decoration: none;
}

.brand svg {
  width: 28px;
  height: 28px;
  display: block;
}

.brand.small {
  font-size: 17px;
}

.brand.small svg {
  width: 22px;
  height: 22px;
}

.mark-plate {
  fill: var(--brand);
}

.mark-arms {
  fill: none;
  stroke: #fff;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- brand hover --- */
/* Hovering the wordmark lets the arms out like a bird: out to the right and
   through the word, down and back under it to the plate's lower left, one
   loop there, then in from the left to settle, white again. The flight is a
   motion path, so the bird follows a real curve and faces where it is going.
   Two copies make the colour change at the plate's edge: the purple one
   behind the plate, the white one clipped to it. */
.brand svg {
  overflow: visible;
}

.brand .mark-flyer {
  stroke: var(--brand);
}

.brand .mark-arms {
  transform-box: fill-box;
  transform-origin: center;
  offset-path: path("M16 16 C30 16 44 -6 56 2 C68 10 76 20 86 14 C94 10 92 32 72 38 C52 44 12 46 -8 38 C-22 32 -24 12 -8 12 C6 12 2 32 -14 30 C-26 28 -10 16 16 16");
  offset-rotate: auto 0deg;
  offset-distance: 0%;
}

.brand:hover .mark-arms {
  animation: brand-glide 2.4s cubic-bezier(0.45, 0.05, 0.3, 1) 1;
}

@keyframes brand-glide {
  0% {
    offset-distance: 0%;
    transform: scale(1);
  }
  45% {
    transform: scale(0.82);
  }
  100% {
    offset-distance: 100%;
    transform: scale(1);
  }
}
/* --- end brand hover --- */

nav.site {
  display: flex;
  align-items: center;
  gap: 4px 24px;
}

nav.site a {
  color: var(--muted);
  font-size: 15px;
  white-space: nowrap;
  transition: color var(--d-fast);
}

nav.site a:hover {
  color: var(--fg);
  text-decoration: none;
}

.nav-cta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-cta .login {
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  padding: 0 10px;
  white-space: nowrap;
  transition: color var(--d-fast);
}

.nav-cta .login:hover {
  color: var(--fg);
  text-decoration: none;
}

.go {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-left: 5px;
  transition: transform var(--d-base) var(--spring);
}

a:hover .go {
  transform: translateX(3px);
}

/* --- buttons --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  transition:
    transform var(--d-base) var(--spring),
    background-color var(--d-fast),
    box-shadow var(--d-fast);
}

.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0) scale(0.98);
}

.btn-sm {
  height: 38px;
  padding: 0 15px;
  font-size: 14px;
  border-radius: 10px;
}

.btn-xs {
  height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
  border-radius: 9px;
}

.btn-light {
  background: #fff;
  color: var(--brand-dark);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.18);
}

.btn-brand {
  background: var(--brand);
  color: var(--on-brand);
  box-shadow: var(--glow);
}

.btn-brand:hover {
  background: var(--brand-hover);
}

/* --- hero ----------------------------------------------------------------- */

/* The hero runs edge to edge and stays flat: the words on the left, inside
   the page's column; the scene on the right, running off the screen's edge
   the way the thread itself does. */
.hero {
  --hero-text: clamp(420px, 44vw, 560px);
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand) 55%, var(--brand-2));
  color: #fff;
}

.hero-in {
  position: relative;
  max-width: 1140px;
  margin: 0 auto;
  padding: 52px clamp(16px, 4vw, 32px) 56px;
  min-height: 500px;
  display: flex;
  align-items: center;
}

.hero-text {
  position: relative;
  z-index: 1;
  width: var(--hero-text);
  max-width: 100%;
  flex: none;
}

.hero-scene {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: max(calc(50% - 570px + var(--hero-text) + 32px), calc(var(--hero-text) + 48px));
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  margin: 0 0 18px;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}

.hero .lead {
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  max-width: 540px;
  margin: 0 0 24px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

#flow {
  width: 100%;
  height: 100%;
  display: block;
}

.hero-note {
  position: absolute;
  right: 24px;
  bottom: 14px;
  z-index: 1;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.6);
}

.promises {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.78);
}

.promises li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.promises li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}

/* --- works with: the tool logos drifting across --------------------------------- */

.works {
  padding: 48px 0 0;
  text-align: center;
}

.works-lbl {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 24px;
}

.marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}

.track {
  list-style: none;
  margin: 0;
  padding: 0 0 0 100px;
  display: flex;
  align-items: center;
  gap: 100px;
  flex: none;
  animation: works-flow 42s linear infinite;
}

.marquee:hover .track {
  animation-play-state: paused;
}

@keyframes works-flow {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.track li {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  color: var(--muted);
  white-space: nowrap;
}

.track li svg {
  width: 64px;
  height: 64px;
  color: var(--brand-ink);
  flex: none;
}

/* A brand whose logo is its name: the wordmark alone, sized by height so it
   sits at the cap height of the names beside it. */
.wmark,
.track li .wmark {
  display: block;
  height: 38px;
  width: auto;
  color: var(--brand-ink);
}

/* Spoken, not shown. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- sections --------------------------------------------------------------- */

.sec {
  padding-top: var(--sec);
}

.sec-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
  margin-bottom: 40px;
}

.sec-head.tight {
  margin-bottom: 0;
}

.kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-ink);
  margin: 0;
}

.kicker.light {
  color: rgba(255, 255, 255, 0.75);
}

.sec h2,
.demo h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.022em;
}

.lede {
  font-size: clamp(16px, 1.5vw, 18px);
  color: var(--muted);
  max-width: 60ch;
  margin: 0;
}

.lede.light {
  color: rgba(255, 255, 255, 0.82);
}

h3 {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Reveal on scroll: a thing settles up into place as it enters the viewport.
   Only once the script has said it is there (html.js) — without it, or
   before it, everything is simply visible. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s var(--ease-out),
    transform 0.55s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.js .reveal.in {
  opacity: 1;
  transform: none;
}

/* --- shared pieces: cards, mocks, badges, rows ----------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--hi);
  transition:
    transform var(--d-base) var(--ease-out),
    border-color var(--d-base);
}

.card:hover {
  transform: translateY(-2px);
  border-color: var(--pink-2);
}

.mk {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--hi), var(--shadow);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  padding: 5px 9px;
  border-radius: 99px;
  background: var(--surface-2);
  color: var(--muted);
  border: 1px solid var(--line);
  white-space: nowrap;
}

.badge.ok {
  background: var(--ok-bg);
  color: var(--ok);
  border-color: transparent;
}

.badge.warn {
  background: var(--warn-bg);
  color: var(--warn);
  border-color: transparent;
}

.badge.ai {
  background: var(--pink);
  color: var(--brand-ink);
  border-color: var(--pink-2);
}

.badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.badge .ri {
  width: 13px;
  height: 13px;
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.row .r {
  margin-left: auto;
  flex: none;
}

.row.end {
  justify-content: flex-end;
  gap: 8px;
  margin-top: auto;
}

.row.end .muted {
  font-size: 13px;
  padding: 0 8px;
}

.row.sub {
  font-size: 13.5px;
  padding-left: 28px;
  margin-top: -4px;
}

.ri {
  width: 18px;
  height: 18px;
  color: var(--brand-ink);
  flex: none;
}

/* --- how it works ---------------------------------------------------------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.step {
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.step-n {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--pink);
  border: 1px solid var(--pink-2);
  color: var(--brand-ink);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 15px;
}

.step p,
.feat p,
.ctrl-item p {
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
}

.step-vis {
  margin-top: auto;
  padding: 14px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
}

.step-vis .muted {
  font-size: 12.5px;
}

/* --- what it does: the bento ------------------------------------------------- */

.bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.feat {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
}

.feat p {
  max-width: 52ch;
}

.feat-vis {
  flex: 1;
  margin-top: 14px;
  padding: 18px;
  border-radius: 16px;
  background: var(--stage);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bub {
  max-width: 86%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14.5px;
  line-height: 1.45;
}

.bub.in {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom-left-radius: 5px;
}

.bub.out {
  align-self: flex-end;
  background: var(--pink);
  border: 1px solid var(--pink-2);
  border-bottom-right-radius: 5px;
}

.bub.sm {
  font-size: 13.5px;
  padding: 8px 12px;
}

.src {
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--faint);
}

.cv {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13.5px;
}

.cv .nm {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cv.hot {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--line));
}

.handoff {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--warn);
}

.handoff::before,
.handoff::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.45;
}

.merge {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
}

.merge .col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.merge .col.one {
  align-items: center;
  gap: 6px;
}

.merge .mark {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 8px 14px rgba(122, 46, 106, 0.3));
}

.merge svg.lines {
  width: 100%;
  height: 132px;
}

.merge svg.lines path {
  fill: none;
  stroke: var(--rose);
  stroke-width: 2;
  opacity: 0.35;
  vector-effect: non-scaling-stroke;
}

/* Once the card is in view, messages run down the three lines into the mark,
   and the mark takes each beat. */
.merge svg.lines path.live {
  opacity: 0.9;
  stroke-width: 2.5;
  stroke-dasharray: 3 11;
  stroke-dashoffset: 28;
}

.in .merge svg.lines path.live {
  animation: merge-flow 1.1s linear infinite;
}

.in .merge svg.lines path.live:nth-child(5) {
  animation-delay: -0.35s;
}

.in .merge svg.lines path.live:nth-child(6) {
  animation-delay: -0.7s;
}

@keyframes merge-flow {
  to {
    stroke-dashoffset: 0;
  }
}

.in .merge .mark {
  animation: merge-beat 2.2s var(--ease-out) infinite;
}

@keyframes merge-beat {
  0%,
  18%,
  100% {
    transform: none;
  }
  8% {
    transform: scale(1.07);
  }
}

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

.tile {
  padding: 11px 12px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.tile .ri {
  width: 20px;
  height: 20px;
  margin-bottom: 4px;
}

.tile .nm {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.tile .cat {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint);
}

/* A wordmark stands where the mark and the name would be. */
.tile .wmark {
  height: 15px;
  margin: 13px 0;
}

/* --- control: the stage band with three mocks ------------------------------------ */

.control {
  margin-top: var(--sec);
  padding-top: var(--sec);
  padding-bottom: var(--sec);
  background: var(--stage);
  border-block: 1px solid var(--line);
}

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

.ctrl-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ctrl-vis {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
  margin-bottom: 8px;
  min-height: 212px;
}

.det {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.det span {
  color: var(--faint);
}

.det b {
  font-weight: 500;
  text-align: right;
}

.band {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--warn);
  background-color: var(--warn-bg);
  background-image: repeating-linear-gradient(-45deg, transparent 0 10px, color-mix(in srgb, var(--warn) 10%, transparent) 10px 20px);
}

.band i {
  width: 8px;
  height: 8px;
  background: currentColor;
  transform: rotate(45deg);
  flex: none;
}

.tl {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding-left: 14px;
  border-left: 1.5px solid var(--line-2);
}

.tl div {
  display: flex;
  gap: 8px;
}

.tl .ms {
  margin-left: auto;
  color: var(--faint);
}

.cost {
  display: flex;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
  padding-top: 8px;
  margin-top: auto;
  border-top: 1px solid var(--line);
}

.cost b {
  color: var(--fg);
  font-weight: 500;
}

.cost .r {
  margin-left: auto;
}

/* --- channels: the Meta grid ------------------------------------------------------ */

.meta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

.meta-text {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.checks {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.checks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  font-size: 16px;
}

.checks li b {
  display: block;
}

.checks li .muted {
  font-size: 15px;
}

.checks.small {
  gap: 10px;
  margin: 0;
}

.checks.small li {
  font-size: 14.5px;
}

.ck {
  width: 22px;
  height: 22px;
  color: var(--ok);
  margin-top: 1px;
}

.note {
  color: var(--muted);
  font-size: 15px;
  max-width: 62ch;
  margin: 0;
}

.own {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 15px;
}

/* --- widget preview ---------------------------------------------------------- */

.preview {
  display: grid;
  gap: 40px;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
}

.wdg {
  width: min(360px, 100%);
  margin: 0 auto;
  border-radius: 18px;
  overflow: hidden;
}

.wdg-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--brand);
  color: #fff;
}

.wdg-head .av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.2);
  font-weight: 600;
  font-size: 13px;
}

.wdg-head small {
  display: block;
  font-size: 12px;
  opacity: 0.8;
}

.wdg-log {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 190px;
}

.msg {
  max-width: 84%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.4;
}

.msg.in {
  align-self: flex-end;
  background: var(--brand);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.msg.out {
  align-self: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}

/* The agent is writing: dots flowing through the mark's arms. */
.typing {
  align-self: flex-start;
  padding: 7px 12px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--brand-ink);
  display: flex;
}

.typing svg {
  width: 28px;
  height: 20px;
  display: block;
  overflow: visible;
}

.typing .trk {
  fill: none;
  stroke: currentColor;
  opacity: 0.2;
  stroke-width: 46;
  stroke-linecap: round;
}

.typing .dts {
  fill: none;
  stroke: currentColor;
  stroke-width: 62;
  stroke-linecap: round;
  stroke-dasharray: 0 0.2;
}

.in .typing .dts {
  animation: flow 0.75s linear infinite;
}

@keyframes flow {
  from {
    stroke-dashoffset: 0.2;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.wdg-in {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 13.5px;
}

.wdg-in span {
  flex: 1;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--surface-2);
}

.wdg-in i {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand);
  display: grid;
  place-items: center;
  color: #fff;
  font-style: normal;
}

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

.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 48px;
  align-items: start;
}

.faq-list {
  border-top: 1px solid var(--line);
}

.faq-list details {
  border-bottom: 1px solid var(--line);
}

.faq-list summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-weight: 600;
  font-size: 17px;
  min-height: 44px;
}

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

.faq-list summary::after {
  content: "+";
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--pink);
  color: var(--brand-ink);
  font-weight: 500;
  font-size: 18px;
  line-height: 1;
  transition: transform var(--d-slow) var(--spring);
}

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

.faq-list p {
  margin: 0 0 20px;
  color: var(--muted);
  max-width: 62ch;
}

/* --- contact: the brand block -------------------------------------------------- */

.demo {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 48px;
  align-items: center;
  padding: clamp(28px, 5vw, 56px);
  border-radius: 28px;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand) 60%, var(--brand-2));
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.demo h2 {
  color: #fff;
}

.demo-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}

.demo-text .actions {
  margin-top: 6px;
}

.demo-mark {
  position: absolute;
  right: -60px;
  bottom: -80px;
  width: 360px;
  height: 360px;
  opacity: 0.12;
}

.demo-card {
  position: relative;
  padding: 24px 26px;
  border-radius: 20px;
  background: var(--surface);
  color: var(--fg);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow);
}

.demo-card b {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 17px;
}

/* --- footer ------------------------------------------------------------------- */

footer.site {
  margin-top: var(--sec);
  border-top: 1px solid var(--line);
  padding: 36px 0 44px;
  color: var(--muted);
  font-size: 14px;
}

footer.site .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-left: auto;
}

footer.site a {
  color: var(--muted);
}

footer.site a:hover {
  color: var(--fg);
}

/* --- the legal pages ------------------------------------------------------------ */

main.doc-page {
  padding: 40px 0 0;
}

.doc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 40px;
  box-shadow: var(--shadow);
}

.doc h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 4vw, 38px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 8px;
}

.doc h2 {
  font-family: var(--font-display);
  font-weight: 650;
  font-size: 22px;
  letter-spacing: -0.01em;
  margin: 36px 0 10px;
}

.doc h3 {
  font-size: 17px;
  margin: 24px 0 8px;
}

.doc ul {
  padding-left: 22px;
}

.doc li {
  margin: 6px 0;
}

.doc .small,
.doc small {
  font-size: 14px;
  color: var(--muted);
}

.doc .mono {
  font-family: var(--font-mono);
  font-size: 14px;
  color: inherit;
  background: var(--surface-2);
  padding: 2px 6px;
  border-radius: 6px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
}

td,
th {
  border-bottom: 1px solid var(--line);
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
  font-size: 15px;
}

th {
  color: var(--muted);
  font-weight: 600;
}

/* --- smaller screens ------------------------------------------------------------- */

@media (max-width: 960px) {
  .steps,
  .ctrl {
    grid-template-columns: 1fr;
  }

  .bento,
  .meta-grid,
  .faq,
  .demo,
  .preview {
    grid-template-columns: 1fr;
  }

  .faq,
  .meta-grid,
  .demo {
    gap: 32px;
  }

  .ctrl-vis {
    min-height: 0;
  }

  /* The scene moves under the words. */
  .hero-in {
    display: block;
    padding: 40px clamp(16px, 4vw, 32px) 0;
    min-height: 0;
  }

  .hero-text {
    width: auto;
    max-width: 600px;
  }

  .hero-scene {
    position: relative;
    inset: auto;
    height: 260px;
    margin-top: 12px;
  }
}

/* The section links need the room; below this the header keeps only the
   brand, Log in and the button. */
@media (max-width: 880px) {
  nav.site {
    display: none;
  }
}

@media (max-width: 760px) {
  header.site .wrap {
    height: 60px;
  }

  header.site.scrolled .wrap {
    max-width: calc(100% - 24px);
    height: 52px;
    margin-top: 8px;
    padding: 0 8px 0 14px;
  }

  .hero-in {
    padding-top: 30px;
  }

  .hero-scene {
    height: 230px;
  }

  .hero-note {
    display: none;
  }

  .track {
    gap: 44px;
    padding-left: 44px;
  }

  .track li {
    font-size: 23px;
    gap: 13px;
  }

  .track li svg {
    width: 38px;
    height: 38px;
  }

  .track li .wmark {
    height: 26px;
    width: auto;
  }

  .feat,
  .step {
    padding: 22px;
  }

  .merge {
    grid-template-columns: 1fr;
  }

  .merge svg.lines {
    display: none;
  }

  .merge .col {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .merge .col.one {
    flex-direction: row;
    justify-content: center;
  }

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

  .demo-mark {
    width: 240px;
    height: 240px;
    right: -50px;
    bottom: -60px;
  }

  .doc {
    padding: 24px;
  }
}

@media (max-width: 420px) {
  .nav-cta .login {
    display: none;
  }
}

/* --- motion off means off ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }

  .marquee {
    -webkit-mask-image: none;
    mask-image: none;
    justify-content: center;
  }

  .track {
    animation: none;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
    gap: 12px 28px;
  }

  .track[aria-hidden="true"] {
    display: none;
  }
}

/* --- pricing page --------------------------------------------------------------- */

.price-page > .sec:first-child {
  padding-top: clamp(40px, 6vw, 72px);
}

.page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.024em;
}

.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px 24px 24px;
}

.plan-hi {
  border-color: var(--brand);
  box-shadow: var(--shadow);
}

.plan-hi:hover {
  border-color: var(--brand);
}

.plan-tag {
  position: absolute;
  top: 16px;
  right: 16px;
}

.sec .plan-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.plan-price {
  margin: 6px 0 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.plan-price .amt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -0.03em;
  line-height: 1;
}

.plan-price .per {
  color: var(--muted);
  font-size: 15px;
}

.plan-vol,
.plan-over {
  margin: 0;
  font-size: 15px;
}

.plan .checks {
  margin: 8px 0 16px;
  flex: 1;
}

.plan .btn {
  justify-content: center;
}

.btn-ghost-brand {
  background: transparent;
  color: var(--brand-ink);
  border: 1px solid var(--line-2);
}

.btn-ghost-brand:hover {
  border-color: var(--brand);
}

.plans-note {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 15px;
}

.plans-note b {
  color: var(--fg);
}

.incl {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 48px;
  align-items: start;
}

@media (max-width: 960px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .incl {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

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

.doc > h2:first-child {
  margin-top: 0;
}