/* ---------------------------------------------------------------------------
   Breezy marketing site.

   A bolder, marketing-scale expression of the Breezy design system
   (.interface-design/system.md). Same paper, same ink, same pen; larger
   gestures. Tokens are copied verbatim from the system; if a value changes
   there, change it here.
--------------------------------------------------------------------------- */

:root {
  /* paper */
  --paper-page: #F2EDE2;
  --paper-card: #F8F4EA;
  --paper-pop: #FDFBF3;
  --paper-inset: #EAE3D2;
  --paper-well: #DFD6C2;

  /* ink */
  --ink-1: #1F1D1A;
  --ink-2: #463E33;
  --ink-3: #7C7065;
  --ink-4: #B5AC9F;

  /* rules */
  --rule-soft: rgba(31, 29, 26, 0.05);
  --rule: rgba(31, 29, 26, 0.09);
  --rule-strong: rgba(31, 29, 26, 0.16);
  --rule-focus: rgba(123, 90, 56, 0.45);

  /* accent */
  --accent: #7B5A38;
  --accent-soft: #E8DDC9;
  --accent-deep: #4F3A24;

  /* semantic */
  --success: #5F7448;
  --success-soft: #DCE3C9;
  --warning: #8B6526;
  --warning-soft: #EBDFC0;
  --warning-ink: #5A3F12;
  --danger: #A23A24;

  /* type */
  --serif: 'Newsreader', Georgia, serif;
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* motion */
  --ease-settle: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-quick: 100ms;
  --dur-reveal: 180ms;
  --dur-settle: 240ms;

  /* layout */
  --content: 1120px;
  --gutter: 24px;
}

/* warm dim / lamp-lit: the same desk under a reading lamp */
@media (prefers-color-scheme: dark) {
  :root {
    --paper-well: #0E0C09;
    --paper-inset: #14120F;
    --paper-page: #1A1815;
    --paper-card: #232017;
    --paper-pop: #2C2820;

    --ink-1: #EDE6D5;
    --ink-2: #C9BFA8;
    --ink-3: #918674;
    --ink-4: #5A5347;

    --rule-soft: rgba(237, 230, 213, 0.06);
    --rule: rgba(237, 230, 213, 0.10);
    --rule-strong: rgba(237, 230, 213, 0.18);
    --rule-focus: rgba(192, 148, 90, 0.60);

    --accent: #C0945A;
    --accent-soft: #3A2D18;
    --accent-deep: #E8C896;

    --success: #93AC76;
    --success-soft: #2A3520;
    --warning: #D49E4F;
    --warning-soft: #3D2C0F;
    --warning-ink: #F0CB85;
    --danger: #DC7461;
  }
}

/* ------------------------------------------------------------------ base */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body.marketing {
  background: var(--paper-page);
  color: var(--ink-1);
  font: 400 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* the interlude's 100vw bleed must never cause a scrollbar */
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul {
  list-style: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.section__inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

main section {
  padding: 110px 0;
}

/* Shared two-column section primitive: heading/lead in the first column,
   content in the second. Standard 64px gutter. Pages should reach for this
   (with a ratio modifier) rather than hand-rolling a bespoke *__grid. */
.section__split {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 64px;
  align-items: start;
}

.section__split--center {
  align-items: center;
}

.section__split--even {
  grid-template-columns: 1fr 1fr;
}

.section__split-head .section__title {
  margin-bottom: 0;
}

/* ---------------------------------------------------------- type voices */

.kicker {
  font: 500 11px var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}

.section__title {
  position: relative;
  display: inline-block;
  font: 500 clamp(30px, 3.6vw, 44px)/1.12 var(--serif);
  letter-spacing: -0.015em;
  color: var(--ink-1);
  margin-bottom: 20px;
  padding-bottom: 14px;
}

/* the pen: a short umber stroke drawn beneath each title as it arrives */
.section__title::after {
  content: '';
  position: absolute;
  left: 2px;
  bottom: 0;
  width: 64px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-settle) var(--ease-settle);
}

.section__title.is-on::after {
  transform: scaleX(1);
}

/* Copy blocks are upright for readability — italic is reserved for the
   wordmark and the occasional single phrase of emphasis in a heading, never
   for running prose, ledes, notes, or quotes. */
.lede {
  font: 400 19px/1.6 var(--serif);
  color: var(--ink-2);
  max-width: 560px;
}

.note {
  font: 400 12px var(--mono);
  color: var(--ink-3);
  margin-top: 22px;
}

/* ------------------------------------------------------------- wordmark */

.brand {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  font: italic 500 22px var(--serif);
  letter-spacing: -0.02em;
  color: var(--ink-1);
  text-decoration: none;
  padding-bottom: 0.55em; /* clears the swash before the umber stroke */
}

.brand__b {
  position: relative;
  top: 0.32em;
  display: inline-block;
  width: 0.82em;
  height: 1em;
}

.brand__b svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.brand__b--sm {
  width: 0.82em;
  height: 1em;
}

/* the pen-stroke hairline beneath the wordmark, drawn once the B is written
   (the quick variant's flourish lands at ~1055ms) */
.brand::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.3em;
  height: 1px;
  background: var(--accent);
  transform-origin: left center;
  animation: reveal var(--dur-settle) var(--ease-settle) 1040ms backwards;
}

.brand--footer {
  font-size: 26px;
}

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

.btn {
  display: inline-block;
  font: 500 13px var(--sans);
  letter-spacing: 0.005em;
  text-decoration: none;
  border: 0;
  border-radius: 4px;
  padding: 9px 18px;
  cursor: pointer;
  transition: background var(--dur-quick) ease-out, color var(--dur-quick) ease-out;
}

.btn--primary {
  background: var(--ink-1);
  color: var(--paper-page);
}

.btn--primary:hover {
  background: var(--ink-2);
}

.btn--primary:active {
  filter: brightness(0.88);
}

.btn--lg {
  font-size: 14px;
  padding: 13px 26px;
}

.btn--ghost {
  position: relative;
  background: transparent;
  color: var(--ink-2);
  padding: 9px 4px;
  border-radius: 0;
}

.btn--ghost::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 6px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 160ms ease-out;
}

.btn--ghost:hover::after {
  transform: scaleX(1);
}

.btn:focus-visible,
a:focus-visible {
  outline: 2px solid var(--rule-focus);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------- chips */

.chip {
  display: inline-block;
  font: 500 11px var(--sans);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 2px;
  background: var(--paper-inset);
  color: var(--ink-3);
}

.chip--success {
  background: var(--success-soft);
  color: var(--success);
}

.chip--warning {
  background: var(--warning-soft);
  color: var(--warning-ink);
}

.chip--accent {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

/* ------------------------------------------------------------------- nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--paper-page);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-quick) ease-out;
}

.nav--scrolled {
  border-bottom-color: var(--rule);
}

.nav__inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: 16px var(--gutter) 6px;
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav__links {
  display: flex;
  gap: 26px;
  margin-left: 12px;
}

.nav__links a,
.nav__signin {
  font: 400 14px var(--sans);
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--dur-quick) ease-out;
}

.nav__links a:hover,
.nav__signin:hover {
  color: var(--ink-1);
}

.nav__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}

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

.hero {
  position: relative;
  overflow: visible;
}

main .hero {
  padding: 96px 0 64px;
}

/* the glyph as a watermark; starts below the nav line, and the swash hangs
   past the section boundary. will-change isolates the 3s of mask re-rasters
   to this element's own compositor layer during page load. */
.hero__watermark {
  position: absolute;
  top: 24px;
  right: -4vw;
  height: 118%;
  width: auto;
  will-change: transform;
  color: var(--ink-1);
  opacity: 0.035;
  fill: currentColor;
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 72px;
  align-items: center;
}

.hero__title {
  font: 500 clamp(42px, 5.4vw, 76px)/1.04 var(--serif);
  letter-spacing: -0.025em;
  color: var(--ink-1);
  margin-bottom: 30px;
  text-wrap: balance;
}

.hero__title em {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--ink-2);
  margin-top: 0.18em;
}

.hero__ctas {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 36px;
}

.hero__note {
  position: relative;
  font: 400 12px var(--mono);
  color: var(--ink-3);
  margin-top: 44px;
  padding-top: 12px;
}

/* a small pen mark above the marginal note */
.hero__note::before {
  content: '';
  position: absolute;
  top: 0;
  left: 1px;
  width: 24px;
  height: 1px;
  background: var(--accent);
}

/* hero entry: everything settles, staggered, once per load */
.hero__copy > * {
  animation: settle var(--dur-settle) var(--ease-settle) backwards;
}

.hero__copy > :nth-child(2) { animation-delay: 60ms; }
.hero__copy > :nth-child(3) { animation-delay: 120ms; }
.hero__copy > :nth-child(4) { animation-delay: 180ms; }
.hero__copy > :nth-child(5) { animation-delay: 240ms; }

/* ------------------------------------------------------- hero preview form

   The hero's one action. A labelled field and a primary button, sharing the
   field system's pen-stroke focus underline rather than a box shadow. */

.preview-form {
  margin-top: 36px;
}

.preview-form__row {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.preview-form__field {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.preview-form__label {
  font: 500 11px var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.preview-form__row input[type='text'] {
  width: 100%;
  font: 400 15px/1.5 var(--sans);
  color: var(--ink-1);
  background: var(--paper-inset);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 11px 12px;
  transition: background var(--dur-quick) ease-out;
}

.preview-form__row input[type='text']:focus {
  outline: none;
  background: var(--paper-pop);
}

.preview-form__row input[type='submit'] {
  flex: 0 0 auto;
}

.preview-form__error {
  margin-top: 14px;
  font: 400 13px/1.6 var(--sans);
  color: var(--danger);
  max-width: 46ch;
}

.preview-form__alt {
  margin-top: 12px;
  font: 400 13px var(--sans);
  color: var(--ink-3);
}

.preview-form__alt a {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.preview-form .cf-turnstile {
  flex: 1 1 100%;
}

/* ------------------------------------------------------------- demo card */

.demo {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  transform: translateY(56px); /* lets the card break the hero's boundary */
  animation: settle var(--dur-settle) var(--ease-settle) 300ms backwards;
}

.demo__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px 8px;
  border-bottom: 1px solid var(--rule-soft);
}

.demo__brand {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  font: italic 500 17px var(--serif);
  letter-spacing: -0.02em;
  color: var(--ink-1);
  padding-bottom: 0.45em;
}

.demo__meta {
  font: 400 11px var(--mono);
  color: var(--ink-3);
}

.demo__body {
  padding: 22px 24px 6px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 360px;
}

.demo__msg p {
  font: 400 14px/1.55 var(--sans);
}

.demo__msg--customer {
  align-self: flex-end;
  max-width: 85%;
  background: var(--paper-inset);
  border-radius: 6px 6px 2px 6px;
  padding: 10px 14px;
  color: var(--ink-1);
}

.demo__msg--ai {
  max-width: 92%;
  color: var(--ink-1);
}

.demo__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.demo__chips .chip {
  font-family: var(--mono);
  font-weight: 400;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-3);
}

.demo__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px 16px;
  border-top: 1px solid var(--rule-soft);
}

/* armed by JS: steps wait their turn, then settle in; rewinds fade out */
.demo--armed [data-demo-step] {
  opacity: 0;
  transition: opacity var(--dur-settle) var(--ease-settle);
}

.demo--armed [data-demo-step].is-played {
  opacity: 1;
  animation: settle var(--dur-settle) var(--ease-settle);
}

/* the ink rhythm: each character fades in as the pen writes it */
.ink-char {
  opacity: 0;
  animation: ink-char 120ms ease-out forwards;
}

/* the pen tip: present while writing, no animation; lifts off when done */
.ink-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--accent);
}

.ink-dot--lift {
  animation: ink-lift 400ms var(--ease-settle) forwards;
}

/* -------------------------------------------------------------- platforms */

.platforms {
  border-top: 1px solid var(--rule);
}

main .platforms {
  padding-top: 130px; /* room for the demo card overlapping from above */
}

.platforms__strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-top: 54px;
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}

.platforms__strip li {
  flex: 1 1 0;
  min-width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 24px;
}

.platforms__strip li + li {
  border-left: 1px solid var(--rule-soft);
}

.platforms__strip img {
  width: auto;
  max-height: 34px;
  filter: grayscale(1) contrast(0.9) opacity(0.72);
  mix-blend-mode: multiply;
}

@media (prefers-color-scheme: dark) {
  .platforms__strip img {
    filter: grayscale(1) invert(1) contrast(0.82) opacity(0.75);
    mix-blend-mode: screen;
  }

  /* the cream ink needs a little more presence against the walnut ground */
  .hero__watermark {
    opacity: 0.06;
  }
}

/* ------------------------------------------------------------------- acts */

.acts {
  border-top: 1px solid var(--rule);
}

.act {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 28px;
  padding: 64px 0;
}

.act + .act {
  border-top: 1px solid var(--rule-soft);
}

.act__num {
  font: 400 13px var(--mono);
  color: var(--ink-4);
  padding-top: 14px;
}

.act__list {
  margin-top: 26px;
  max-width: 480px;
}

.act__list li {
  font: 400 14px/1.5 var(--sans);
  color: var(--ink-2);
  padding: 11px 0 11px 2px;
  border-bottom: 1px solid var(--rule-soft);
}

.act__list li:first-child {
  border-top: 1px solid var(--rule-soft);
}

/* ------------------------------------------------------------------ plates */

.plate {
  margin-top: 42px;
  max-width: 640px;
}

.plate__img {
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}

.plate__img img {
  width: 100%;
}

@media (prefers-color-scheme: dark) {
  .plate__img img {
    filter: brightness(0.9);
  }
}

.plate__img--placeholder {
  aspect-ratio: 3 / 2;
  background: var(--paper-inset);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 14px,
    var(--rule-soft) 14px 15px
  );
}

.plate__img--tall {
  aspect-ratio: 4 / 5;
}

.plate figcaption {
  font: 400 11px var(--mono);
  color: var(--ink-3);
  margin-top: 10px;
}

/* -------------------------------------------------------------- interlude */

/* The page's single full-width moment: a band of photograph bounded by
   hairlines, a breath of no words mid-section. */
.interlude {
  margin: 72px 0 0;
}

.interlude__img {
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  border-block: 1px solid var(--rule);
}

.interlude__img img {
  width: 100%;
  height: clamp(260px, 38vw, 440px);
  object-fit: cover;
}

.interlude figcaption {
  font: 400 11px var(--mono);
  color: var(--ink-3);
  margin-top: 10px;
}

@media (prefers-color-scheme: dark) {
  .interlude__img img {
    filter: brightness(0.9);
  }
}

/* ------------------------------------------------------------------ voice */

.voice {
  border-top: 1px solid var(--rule);
}

.voice__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 72px;
  align-items: start;
}

.voice .plate {
  margin-top: 0;
}

/* the kept record: a transcript styled as a document, not as chat */
.transcript {
  margin-top: 40px;
  max-width: 520px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 20px 24px;
}

.transcript__meta {
  font: 400 11px var(--mono);
  color: var(--ink-3);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-soft);
}

.transcript__lines {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 10px 16px;
  padding-top: 14px;
}

.transcript__lines dt {
  font: 400 11px var(--mono);
  text-transform: lowercase;
  color: var(--ink-3);
  padding-top: 2px;
}

.transcript__lines dd {
  font: 400 14px/1.5 var(--sans);
  color: var(--ink-1);
}

.transcript figcaption {
  font: 400 11px var(--mono);
  color: var(--ink-3);
  margin-top: 16px;
}

/* ------------------------------------------------------------------ stats */

.stats {
  border-top: 1px solid var(--rule);
}

.stats__strip {
  display: flex;
}

.stats__item {
  flex: 1;
  padding: 12px 40px;
  /* The markup is <dt>label</dt><dd>value</dd>, which is the right way round
     for a definition list. Reversing here keeps the number first visually,
     which is what the labels read as ("9 in 10" then "of conversations..."). */
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
}

.stats__item + .stats__item {
  border-left: 1px solid var(--rule);
}

.stats__item:first-child {
  padding-left: 0;
}

.stats__item dd {
  font: 500 clamp(52px, 6vw, 84px)/1 var(--serif);
  letter-spacing: -0.025em;
  color: var(--ink-1);
}

.stats__item dt {
  font: 400 12px var(--mono);
  color: var(--ink-3);
  margin-top: 14px;
}

/* -------------------------------------------------------------------- ops */

.ops {
  border-top: 1px solid var(--rule);
}

.exhibit {
  margin-top: 48px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 6px;
}

.reassurance {
  padding: 36px 40px 30px;
}

.reassurance .kicker {
  margin-bottom: 12px;
}

.reassurance__headline {
  font: 500 28px/1.15 var(--serif);
  letter-spacing: -0.012em;
  color: var(--ink-1);
}

.reassurance__lede {
  font: 400 16px/1.6 var(--serif);
  color: var(--ink-2);
  margin-top: 8px;
  max-width: 520px;
}

.reassurance__stats {
  display: flex;
  gap: 0;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-soft);
}

.reassurance__stats > div {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 32px;
}

.reassurance__stats > div:first-child {
  padding-left: 0;
}

.reassurance__stats > div + div {
  border-left: 1px solid var(--rule-soft);
}

.reassurance__label {
  font: 500 11px var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.reassurance__value {
  font: 500 22px var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.018em;
  color: var(--ink-1);
}

.ledger {
  border-top: 1px solid var(--rule);
}

.ledger__row {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 20px 40px 20px 28px;
}

.ledger__row + .ledger__row {
  border-top: 1px solid var(--rule-soft);
}

.ledger__time {
  font: 400 12px var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

.ledger__body {
  font: 400 14px var(--sans);
  color: var(--ink-1);
}

.ledger__body em {
  display: block;
  font: 400 13px var(--sans);
  color: var(--ink-2);
  margin-top: 2px;
}

/* ------------------------------------------------------------------ quotes */

.quotes {
  border-top: 1px solid var(--rule);
}

.quotes__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  margin-top: 56px;
  padding-top: 48px;
  border-top: 1px solid var(--rule-soft);
}

.quote p {
  font: 400 19px/1.55 var(--serif);
  color: var(--ink-2);
}

.quote p::before {
  content: '\201C';
}

.quote p::after {
  content: '\201D';
}

.quote cite {
  display: block;
  font: 400 11px var(--mono);
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 18px;
}

/* one quote at display scale; the pair beneath supports it.
   Must follow .quote p: same specificity, later source order wins. */
.quote--lead {
  margin-top: 30px;
}

.quote--lead p {
  font: 400 clamp(26px, 3.2vw, 38px)/1.4 var(--serif);
  color: var(--ink-1);
  max-width: 820px;
  text-indent: -0.45em;
  hanging-punctuation: first;
}

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

.pricing {
  border-top: 1px solid var(--rule);
}

.pricing__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: start;
  margin-top: 48px;
}

.price-ledger {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* one concrete month, so the credit system stops being abstract */
.receipt {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 24px 28px;
}

.receipt .kicker {
  margin-bottom: 10px;
}

.receipt__head {
  font: 500 18px var(--serif);
  letter-spacing: -0.008em;
  color: var(--ink-1);
  margin-bottom: 18px;
}

.receipt__lines > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--rule-soft);
  font: 400 13px var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.receipt__lines .receipt__total {
  border-top: 1px solid var(--rule-strong);
  color: var(--ink-1);
  font-weight: 500;
}

.receipt__note {
  font: 400 13px var(--sans);
  color: var(--ink-3);
  margin-top: 14px;
}

.price-ledger__row {
  position: relative;
  display: grid;
  grid-template-columns: 1.3fr 1fr 0.6fr 1.1fr;
  gap: 24px;
  align-items: baseline;
  padding: 26px 28px;
}

.price-ledger__row + .price-ledger__row {
  border-top: 1px solid var(--rule-soft);
}

.price-ledger__row--marked {
  background: var(--paper-pop);
}

/* the pen marks the chosen line */
.price-ledger__row--marked::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
}

.price-ledger__name {
  font: 500 22px var(--serif);
  letter-spacing: -0.008em;
  color: var(--ink-1);
  display: flex;
  align-items: center;
  gap: 14px;
}

.price-ledger__credits {
  font: 400 13px var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.price-ledger__price {
  font: 500 22px var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.018em;
  color: var(--ink-1);
}

.price-ledger__note {
  font: 400 13px var(--sans);
  color: var(--ink-3);
  text-align: right;
}

.pricing__fineprint {
  font: 400 14px/1.7 var(--serif);
  color: var(--ink-3);
  margin-top: 26px;
  max-width: 560px;
}

/* -------------------------------------------------------------------- book */

.book {
  border-top: 1px solid var(--rule);
}

.book__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.book__form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 36px;
}

.book__error {
  font: 400 14px var(--serif);
  color: var(--danger);
}

.book__received {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 48px 40px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.field label {
  font: 500 11px var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.field__wrapper {
  position: relative;
  display: block;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  font: 400 14px/1.5 var(--sans);
  color: var(--ink-1);
  background: var(--paper-inset);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 9px 12px;
  transition: background var(--dur-quick) ease-out;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-4);
}

.field select {
  appearance: none;
}

.field__wrapper:has(select)::before {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

/* focus: the pen marks the line you're filling in */
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  background: var(--paper-pop);
}

.field__wrapper::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-settle) var(--ease-settle);
}

.field__wrapper:focus-within::after {
  transform: scaleX(1);
}

/* honeypot: present in the document, absent from the page */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.book__form .btn {
  align-self: flex-start;
  margin-top: 6px;
}

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

.footer {
  border-top: 1px solid var(--rule-strong);
  padding: 64px 0 72px;
}

.footer__inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.footer__line {
  font: 400 14px var(--serif);
  color: var(--ink-3);
  margin-top: 6px;
}

.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font: 400 14px var(--sans);
}

.footer__nav a {
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--dur-quick) ease-out;
}

.footer__nav a:hover {
  color: var(--ink-1);
}

.footer__meta {
  text-align: right;
  font: 400 12px var(--mono);
  color: var(--ink-3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__meta a {
  color: var(--ink-2);
  text-decoration: none;
}

.footer__meta a:hover {
  color: var(--ink-1);
}

/* ------------------------------------------------------------ pricing cta */

/* Sits under the plan ledger: the page listed four plans and gave the reader
   nowhere to press. */
.pricing__cta {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* --------------------------------------------------------------- stagger */

/* JS arms a [data-stagger] container; children settle in sequence */
[data-stagger].is-armed > * {
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity var(--dur-settle) var(--ease-settle),
    transform var(--dur-settle) var(--ease-settle);
}

[data-stagger].is-armed.is-on > * {
  opacity: 1;
  transform: none;
}

[data-stagger].is-armed.is-on > :nth-child(2) { transition-delay: 60ms; }
[data-stagger].is-armed.is-on > :nth-child(3) { transition-delay: 120ms; }
[data-stagger].is-armed.is-on > :nth-child(4) { transition-delay: 180ms; }
[data-stagger].is-armed.is-on > :nth-child(5) { transition-delay: 240ms; }
[data-stagger].is-armed.is-on > :nth-child(6) { transition-delay: 300ms; }

/* ------------------------------------------------------------ drawn glyph */

/* The glyph written by a pen: white mask strokes reveal the ink along the
   writing direction. The flood rect fades in last, guaranteeing the complete
   glyph even where the hand-fitted strokes miss by a hair. Under reduced
   motion the global collapse completes everything instantly. */

/* Dash geometry lives on the path attributes in shared/_drawn_glyph (real
   path lengths; see the comment there). The keyframe animates the offset to
   zero from whatever each stroke's attribute declares. */
.glyph-drawn__stroke {
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
}

.glyph-drawn__s1 { stroke-width: 94; }
.glyph-drawn__s2 { stroke-width: 46; }
.glyph-drawn__s3a { stroke-width: 38; } /* the bar is thin; its flag must grow from a nib */
.glyph-drawn__s3 { stroke-width: 100; }
.glyph-drawn__s3b { stroke-width: 50; } /* the ink tapers into the waist */
.glyph-drawn__s4 { stroke-width: 48; } /* the spur is a thin flick */
.glyph-drawn__s5 { stroke-width: 96; }

/* The flood has no resting opacity rule: a browser that never runs the
   animations shows the complete glyph statically (fail-open). `both` holds
   it hidden through the delay when animations do run. */

/* The B is written as two pen strokes, the way a hand makes it: the stem
   (ruled down into the foot, then the serif), then the "3" — top bar, upper
   bowl, waist, spur, and flourish, drawn in one continuous motion. Each
   stroke eases in once as the pen touches down and eases out once as it
   lifts; in between it holds a constant speed, so the only acceleration is
   at the start of a stroke and the only deceleration at its end. The pen
   comes to rest (lifts) once, between the two strokes. Durations are
   proportional to stroke length to keep that mid-stroke speed constant. */
:root {
  /* rest -> cruise: slow touchdown, settling to a constant speed by the end */
  --ease-in: cubic-bezier(0.4, 0, 0.7, 0.7);
  /* cruise -> rest: enters already moving, releases to a stop */
  --ease-out: cubic-bezier(0.3, 0.3, 0.7, 1);
}

/* hero-watermark scale: an unhurried hand
   stem 150-950 · pen lifts to the top · the "3" 1200-3010 ·
   flood (a no-op when coverage is complete) */
.glyph-drawn--slow .glyph-drawn__s1 { animation: glyph-write 660ms var(--ease-in) 150ms forwards; }
.glyph-drawn--slow .glyph-drawn__s2 { animation: glyph-write 140ms var(--ease-out) 810ms forwards; }
.glyph-drawn--slow .glyph-drawn__s3a { animation: glyph-write 330ms var(--ease-in) 1200ms forwards; }
.glyph-drawn--slow .glyph-drawn__s3 { animation: glyph-write 310ms linear 1530ms forwards; }
.glyph-drawn--slow .glyph-drawn__s3b { animation: glyph-write 160ms linear 1840ms forwards; }
.glyph-drawn--slow .glyph-drawn__s4 { animation: glyph-write 130ms linear 2000ms forwards; }
.glyph-drawn--slow .glyph-drawn__s5 { animation: glyph-write 880ms var(--ease-out) 2130ms forwards; }
.glyph-drawn--slow .glyph-drawn__flood { animation: glyph-flood 80ms ease-out 3010ms both; }

/* wordmark scale: a signature, dashed off */
.glyph-drawn--quick .glyph-drawn__s1 { animation: glyph-write 220ms var(--ease-in) 60ms forwards; }
.glyph-drawn--quick .glyph-drawn__s2 { animation: glyph-write 47ms var(--ease-out) 280ms forwards; }
.glyph-drawn--quick .glyph-drawn__s3a { animation: glyph-write 110ms var(--ease-in) 420ms forwards; }
.glyph-drawn--quick .glyph-drawn__s3 { animation: glyph-write 103ms linear 530ms forwards; }
.glyph-drawn--quick .glyph-drawn__s3b { animation: glyph-write 52ms linear 633ms forwards; }
.glyph-drawn--quick .glyph-drawn__s4 { animation: glyph-write 43ms linear 685ms forwards; }
.glyph-drawn--quick .glyph-drawn__s5 { animation: glyph-write 293ms var(--ease-out) 728ms forwards; }
.glyph-drawn--quick .glyph-drawn__flood { animation: glyph-flood 50ms ease-out 1021ms both; }

/* All strokes share this keyframe; each animates from its own
   stroke-dashoffset attribute (len + 1, set in shared/_drawn_glyph) to 0.
   Velocity shaping lives in the per-stroke timing functions above, not here. */
@keyframes glyph-write {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes glyph-flood {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* the nav wordmark's letters follow the pen: 'reezy' inks in left to right
   as the B's bowls and swash are written */
.brand__rest--writes span {
  opacity: 0;
  animation: ink-char 120ms ease-out forwards;
}

.brand__rest--writes span:nth-child(1) { animation-delay: 560ms; }
.brand__rest--writes span:nth-child(2) { animation-delay: 660ms; }
.brand__rest--writes span:nth-child(3) { animation-delay: 760ms; }
.brand__rest--writes span:nth-child(4) { animation-delay: 860ms; }
.brand__rest--writes span:nth-child(5) { animation-delay: 960ms; }

/* -------------------------------------------------------------- keyframes */

@keyframes settle {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* the demo card keeps its overlap offset while settling */
.demo {
  animation-name: demo-settle;
}

@keyframes demo-settle {
  from {
    opacity: 0;
    transform: translateY(60px);
  }

  to {
    opacity: 1;
    transform: translateY(56px);
  }
}

@keyframes reveal {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes ink-char {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes ink-lift {
  to {
    opacity: 0;
    transform: translateY(-2px);
  }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 1023px) {
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .demo {
    transform: none;
    animation-name: settle;
    max-width: 560px;
  }

  main .hero {
    padding-bottom: 96px;
  }

  main .platforms {
    padding-top: 110px;
  }

  .hero__watermark {
    height: 70%;
    right: -18vw;
  }

  .voice__grid,
  .book__grid,
  .pricing__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .quotes__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

@media (max-width: 719px) {
  main section {
    padding: 72px 0;
  }

  .nav__links {
    display: none;
  }

  /* No menu replaces .nav__links here, so the bar is brand plus the single
     primary action. Three actions at 375px pushed the wordmark off its own
     baseline; sign-in and book-a-demo live in the footer instead. */
  .nav__secondary {
    display: none;
  }

  /* Put the action above the lede on a phone. At 375px the four-line lede
     pushed "start free" past the fold, so the first screen argued the case
     and then offered nothing to do about it. The nth-child settle delays
     above are positional, so they still fire in the order things appear. */
  .hero__copy {
    display: flex;
    flex-direction: column;
  }

  .hero__copy .kicker { order: 1; }
  .hero__copy .hero__title { order: 2; }
  .hero__copy .hero__ctas,
  .hero__copy .preview-form {
    order: 3;
    /* The lede's own top margin was sized to follow the title, so reordering
       left the buttons sitting on top of the paragraph. */
    margin-bottom: 24px;
  }
  .hero__copy .lede { order: 4; }
  .hero__copy .hero__note { order: 5; }

  .act {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 48px 0;
  }

  .stats__strip {
    flex-direction: column;
  }

  .stats__item {
    padding: 26px 0;
  }

  .stats__item + .stats__item {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }

  .reassurance__stats {
    flex-wrap: wrap;
    gap: 18px 0;
  }

  .reassurance__stats > div {
    flex-basis: 50%;
    border-left: 0 !important;
    padding: 0;
  }

  .price-ledger__row {
    grid-template-columns: 1fr auto;
    gap: 8px 24px;
  }

  .price-ledger__note {
    grid-column: 1 / -1;
    text-align: left;
  }

  .ledger__row {
    grid-template-columns: 48px 1fr;
    padding: 18px 20px;
  }

  .ledger__row .chip {
    grid-column: 2;
    justify-self: start;
  }

  .footer__inner {
    flex-direction: column;
  }

  .footer__meta {
    text-align: left;
  }
}

/* ---------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
}

/* ============================================================ pricing page */

/* homepage teaser that replaced the full pricing block */
.pricing-teaser {
  border-top: 1px solid var(--rule);
}

.pricing-teaser__inner .lede {
  margin-bottom: 28px;
}

/* lead section of the pricing page sits a little tighter to the nav */
.section--head {
  padding-bottom: 0;
}

.section__title--lead {
  font-size: clamp(38px, 4.8vw, 60px);
}

/* ----------------------------------------------------------- calculator */

.calc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.calc__intro .lede {
  margin-bottom: 32px;
}

.calc__form {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 420px;
}

/* the result is the loud, reassuring half: a warm card carrying the number */
.calc__result {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--accent);
  border-radius: 6px;
  padding: 32px 32px 28px;
}

.calc__result-label {
  font: 500 11px var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}

.calc__savings {
  font: 500 clamp(44px, 5.4vw, 64px)/1 var(--serif);
  letter-spacing: -0.02em;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
  margin-bottom: 28px;
}

.calc__savings-currency {
  color: var(--accent);
  margin-right: 2px;
}

.calc__savings-unit {
  display: block;
  font: 400 16px var(--serif);
  color: var(--ink-3);
  margin-top: 8px;
}

.calc__run {
  margin-top: 6px;
  align-self: flex-start;
}

/* before/after comparison: both tracks are the full width of today's cost */
.calc__viz {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 26px;
}

.calc__viz-row {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  align-items: center;
  gap: 12px;
}

.calc__viz-label {
  font: 400 12px var(--mono);
  color: var(--ink-3);
}

.calc__viz-track {
  display: flex;
  height: 28px;
  border-radius: 6px;
  background: var(--paper-well);
  overflow: hidden;
}

.calc__viz-seg {
  display: flex;
  align-items: center;
  height: 100%;
  min-width: 0;
  transition: width var(--dur-settle) var(--ease-settle);
}

.calc__viz-seg--today,
.calc__viz-seg--spent {
  background: var(--ink-4);
}

.calc__viz-seg--saved {
  background: var(--accent);
  padding-left: 10px;
}

.calc__viz-saved-label {
  font: 500 12px var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--paper-pop);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calc__viz-value {
  font: 500 13px var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.calc__ledger {
  border-top: 1px solid var(--rule);
}

.calc__ledger > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-soft);
  font: 400 13px var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.calc__ledger dt {
  color: var(--ink-3);
}

.calc__note {
  font: 400 13px/1.55 var(--sans);
  color: var(--ink-3);
  margin-top: 18px;
}

/* ------------------------------------------------------------------ faq */

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

.faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 56px;
  margin-top: 48px;
}

.faq__item {
  border-top: 1px solid var(--rule);
  padding-top: 18px;
}

.faq__q {
  font: 500 18px var(--serif);
  letter-spacing: -0.008em;
  color: var(--ink-1);
  margin-bottom: 10px;
}

.faq__a {
  font: 400 15px/1.6 var(--sans);
  color: var(--ink-2);
}

/* slim CTA used at the foot of the pricing page */
.book--slim .lede {
  margin-bottom: 28px;
}

@media (max-width: 1023px) {
  .calc,
  .faq__grid {
    grid-template-columns: 1fr;
  }

  .calc {
    gap: 40px;
  }

  .faq__grid {
    gap: 0;
  }

  .faq__item {
    padding-bottom: 24px;
  }
}

@media (max-width: 719px) {
  .calc__form {
    max-width: none;
  }

  .calc__viz-row {
    grid-template-columns: 72px 1fr auto;
  }
}

/* ============================================================== about page */

/* hero mark: the heart drawn in the brand's umber pen, centred in its column */
.about-hero__mark {
  color: var(--accent);
  width: 160px;
  height: 145px;
  justify-self: center;
}

.heart-drawn {
  width: 100%;
  height: 100%;
}

/* the pen draws the outline, then the flood inks the fill — see the glyph */
.heart-drawn__stroke {
  fill: none;
  stroke: #fff;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: glyph-write 1100ms var(--ease-in) 250ms forwards;
}

.heart-drawn__flood {
  animation: glyph-flood 260ms ease-out 1300ms both;
}

/* content blocks use the shared .section__split primitive */
.about-block {
  border-top: 1px solid var(--rule);
}

.about-block--alt {
  background: var(--paper-card);
}

.about-block__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 620px;
}

.about-block__body p {
  font: 400 16px/1.7 var(--sans);
  color: var(--ink-2);
}

.about-block__body a {
  color: var(--ink-1);
}

.about-block__body code {
  font: 400 14px var(--mono);
}

/* Ruled list for the privacy page's inventories, in the act-list hand. */
.legal-list li {
  font: 400 16px/1.6 var(--sans);
  color: var(--ink-2);
  padding: 11px 0 11px 2px;
  border-bottom: 1px solid var(--rule-soft);
}

.legal-list li:first-child {
  border-top: 1px solid var(--rule-soft);
}

.legal-list strong {
  font-weight: 500;
  color: var(--ink-1);
}

/* foot-of-page pager */
.next-page {
  border-top: 1px solid var(--rule-strong);
}

.next-page__link {
  display: block;
  text-decoration: none;
  color: var(--ink-1);
}

.next-page__kicker {
  display: block;
  font: 500 11px var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}

.next-page__title {
  display: block;
  font: 500 clamp(26px, 3vw, 38px)/1.15 var(--serif);
  letter-spacing: -0.015em;
  color: var(--ink-1);
  max-width: 640px;
}

.next-page__blurb {
  display: block;
  font: 400 17px/1.6 var(--serif);
  color: var(--ink-3);
  margin-top: 12px;
  max-width: 520px;
}

.next-page__cue {
  position: relative;
  display: inline-block;
  font: 500 13px var(--sans);
  color: var(--ink-2);
  margin-top: 22px;
  padding-bottom: 4px;
}

.next-page__cue::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-settle) var(--ease-settle);
}

.next-page__link:hover .next-page__cue::after,
.next-page__link:focus-visible .next-page__cue::after {
  transform: scaleX(1);
}

@media (max-width: 1023px) {
  .section__split {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .about-hero__mark {
    width: 110px;
    height: 100px;
    justify-self: start;
  }
}

/* ==================================================== partner landing pages */

.partner-hero .hero__ctas {
  margin-top: 28px;
}

/* "works with [logo]" lockup: logo decoloured to sit with the brand, matching
   the homepage platform strip rather than clashing in full colour */
.partner-hero__lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}

.partner-hero__lockup .kicker {
  margin-bottom: 0;
}

.partner-hero__logo {
  width: auto;
  height: 26px;
  filter: grayscale(1) contrast(0.9) opacity(0.72);
  mix-blend-mode: multiply;
}

/* dark mode: invert dark wordmarks to light and lighten-blend, matching the
   homepage platform strip — multiply would sink them into the dark paper */
@media (prefers-color-scheme: dark) {
  .partner-hero__logo {
    filter: grayscale(1) invert(1) contrast(0.82) opacity(0.75);
    mix-blend-mode: screen;
  }
}

.partner-block--alt {
  background: var(--paper-card);
}

/* value strip: the explicit, value-led promise (time, cost, simplicity) */
.value-strip {
  border-top: 1px solid var(--rule);
}

.value-strip__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.value-strip__stat {
  font: 500 clamp(21px, 2.2vw, 26px)/1.2 var(--serif);
  letter-spacing: -0.01em;
  color: var(--ink-1);
  margin-bottom: 12px;
}

.value-strip__body {
  font: 400 15px/1.6 var(--sans);
  color: var(--ink-2);
}

/* partner booking actions: the differentiated, partner-specific substance */
.partner-caps {
  border-top: 1px solid var(--rule);
}

.partner-caps .lede {
  margin-bottom: 8px;
}

.cap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 56px;
  margin-top: 40px;
}

.cap-grid__item {
  position: relative;
  padding: 18px 0 18px 22px;
  border-top: 1px solid var(--rule);
  font: 400 16px/1.55 var(--sans);
  color: var(--ink-2);
}

.cap-grid__item::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 25px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* features: the product, named clearly (chat, phone, workflows, escalations) */
.partner-features {
  border-top: 1px solid var(--rule);
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px 48px;
  margin-top: 48px;
}

.feature-list__title {
  font: 500 17px var(--serif);
  letter-spacing: -0.005em;
  color: var(--ink-1);
  margin-bottom: 8px;
}

.feature-list__body {
  font: 400 15px/1.55 var(--sans);
  color: var(--ink-2);
}

/* closing call to action: content left, animated free-credits rosette right */
.partner-cta {
  border-top: 1px solid var(--rule);
}

.partner-cta .section__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 56px;
  align-items: center;
}

.partner-cta__content {
  max-width: 620px;
}

.partner-cta__content .btn {
  margin-top: 28px;
}

/* free-credits rosette: a sales seal whose scalloped ring turns slowly */
.rosette {
  width: 140px;
  height: 140px;
  justify-self: end;
  transform: rotate(-6deg);
}

.rosette__svg {
  width: 100%;
  height: 100%;
}

.rosette__bump,
.rosette__seal {
  fill: var(--accent);
}

.rosette__ring {
  transform-box: fill-box;
  transform-origin: center;
}

@media (prefers-reduced-motion: no-preference) {
  .rosette__ring {
    animation: rosette-spin 20s linear infinite;
  }
}

@keyframes rosette-spin {
  to { transform: rotate(360deg); }
}

.rosette__num {
  fill: var(--paper-page);
  font: 700 27px var(--sans);
  text-anchor: middle;
}

.rosette__label {
  fill: var(--paper-page);
  font: 600 8.5px var(--sans);
  letter-spacing: 0.1em;
  text-anchor: middle;
}

@media (max-width: 1023px) {
  .value-strip__grid,
  .feature-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 719px) {
  .cap-grid,
  .value-strip__grid,
  .feature-list {
    grid-template-columns: 1fr;
  }

  .partner-cta .section__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .rosette {
    justify-self: start;
  }
}

/* ============================================================ preview page

   Left, the reading ledger: what Breezy has read, in the demo card's rhythm,
   with a single pen line below it saying what is happening now. No bar, no
   percentage, no spinner — the design system's loading rule is "don't spin",
   and the Ink pen tip is the only mid-thought indicator we have.

   Right, the assistant itself, docked inside a card that stands in for the
   operator's own site. */

.preview__inner {
  max-width: var(--content);
  margin: 0 auto;
  padding: 72px var(--gutter) 96px;
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: 64px;
  align-items: start;
}

.preview__title {
  font: 400 36px/1.15 var(--serif);
  color: var(--ink-1);
  margin: 10px 0 28px;
}

.preview__title em {
  display: block;
  font-style: italic;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.preview__ledger {
  border-top: 1px solid var(--rule);
}

.preview__row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-soft);
  animation: settle var(--dur-settle) var(--ease-settle) backwards;
}

.preview__row-path {
  /* Fixed measure, so the titles form a column rather than a ragged edge.
     Long paths wrap inside it rather than pushing the title along. */
  flex: 0 0 34%;
  font: 400 12px var(--mono);
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.preview__row-title {
  font: 400 14px/1.5 var(--sans);
  color: var(--ink-1);
  overflow-wrap: anywhere;
}

.preview__pen {
  margin-top: 16px;
  font: italic 400 14px/1.6 var(--serif);
  color: var(--ink-3);
}

/* The pen's last line, when the card it points at is off-screen. */
.preview__pen-link {
  color: var(--ink-2);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
}

.preview__wait {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}

.preview__wait-lede {
  font: 400 15px/1.6 var(--sans);
  color: var(--ink-2);
  margin-bottom: 14px;
  max-width: 44ch;
}

.preview__notify {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

.preview__notify input[type='email'] {
  flex: 1 1 220px;
  font: 400 14px/1.5 var(--sans);
  color: var(--ink-1);
  background: var(--paper-inset);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 9px 12px;
}

.preview__notify input[type='email']:focus {
  outline: none;
  background: var(--paper-pop);
}

.preview__wait-note {
  margin-top: 12px;
  font: 400 12px/1.6 var(--sans);
  color: var(--ink-3);
}

.preview__wait-note a {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The "your site" card. It owns its own box: the inline widget inside is
   absolutely positioned, so without a height here it would collapse to
   nothing. */
.preview__card {
  position: relative;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}

/* The live mark: when the assistant goes live, a 2px accent rule draws
   across the top of the card, left to right, and stays. */
.preview__card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 1;
}

.preview__card.is-live::before {
  transform: none;
  animation: reveal var(--dur-settle) var(--ease-settle) backwards;
}

.preview__card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule-soft);
}

.preview__card-host {
  font: 400 12px var(--mono);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.preview__card-meta {
  font: italic 400 13px var(--serif);
  color: var(--ink-3);
  text-align: right;
}

.preview__widget {
  position: relative;
  height: min(580px, 78dvh);
  min-height: 420px;
  background: var(--paper-page);
}

/* Where the assistant will be, set like the chat's own welcome so the
   reveal lands in the same place. Fades out under the panel and stays
   hidden, so closing the panel never brings it back. */
.preview__ghost {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 18px;
  transition: opacity var(--dur-settle) var(--ease-settle), visibility 0s linear var(--dur-settle);
}

.preview__ghost .kicker {
  margin-bottom: 10px;
}

.preview__ghost-line {
  font: italic 400 18px/1.45 var(--serif);
  color: var(--ink-3);
  max-width: 28ch;
}

.preview__card.is-live .preview__ghost {
  opacity: 0;
  visibility: hidden;
}

/* The embed's panel, held invisible while its iframe loads behind the
   ghost. The embed's own open transition plays out unseen; this settle is
   the one the visitor sees. */
.preview__widget .breezy-inline {
  opacity: 0;
  pointer-events: none;
}

.preview__card.is-live .breezy-inline {
  opacity: 1;
  pointer-events: auto;
  animation: settle var(--dur-settle) var(--ease-settle) backwards;
}

.preview__caption {
  margin-top: 20px;
  font: 400 13px/1.7 var(--sans);
  color: var(--ink-3);
  max-width: 56ch;
}

.preview__ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 24px;
}

.preview--closed .preview__closed {
  max-width: 620px;
  margin: 0 auto;
  padding: 112px var(--gutter) 120px;
  text-align: center;
}

.preview--closed .preview__title {
  margin-bottom: 16px;
}

.preview--closed .preview__ctas {
  justify-content: center;
  margin-top: 32px;
}

@media (max-width: 1023px) {
  .preview__inner {
    grid-template-columns: 1fr;
    gap: 44px;
    padding-top: 56px;
  }

  /* The assistant first on a narrow screen: the ledger is the explanation,
     the chat is the point. */
  .preview__widget-col { order: 1; }
  .preview__ledger-col { order: 2; }
}

@media (max-width: 719px) {
  .preview__title {
    font-size: 28px;
  }

  .preview__widget {
    height: min(520px, 72dvh);
  }
}