/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
      "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
      "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --spacing: 0.25rem;
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-tight: -0.025em;
    --tracking-wide: 0.025em;
    --leading-tight: 1.25;
    --leading-relaxed: 1.625;
    --radius-lg: 0.5rem;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
}
:root {
  --color-ink: #17222c;
  --color-muted: #62707a;
  --color-border: #dbe3e2;
  --color-bg: #f8faf6;
  --color-bg-soft: #edf3ee;
  --color-bg-sage: #e4f0e7;
  --color-border-sage: #b9d7c1;
  --color-primary: #146b4a;
  --color-primary-ink: #ffffff;
  --color-accent: #d5ff67;
  --color-deep: #123a31;
  --color-warm: #fffdf8;
  --radius: 16px;
  --max-width: 1160px;
}
body {
  margin: 0px;
  --tw-leading: var(--leading-relaxed);
  line-height: var(--leading-relaxed);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--color-ink);
  background: var(--color-bg);
}
.container {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: calc(var(--spacing) * 6);
}
a {
  color: inherit;
}
:focus-visible {
  outline: 3px solid #79aaff;
  outline-offset: 3px;
}
h1, h2, h3 {
  --tw-leading: var(--leading-tight);
  line-height: var(--leading-tight);
  --tw-tracking: var(--tracking-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
}
h1 {
  margin-bottom: calc(var(--spacing) * 5);
  font-size: var(--text-4xl);
  line-height: var(--tw-leading, var(--text-4xl--line-height));
  font-size: clamp(2.75rem, 5.2vw, 5rem);
  letter-spacing: -0.065em;
}
h2 {
  margin-bottom: calc(var(--spacing) * 6);
  font-size: var(--text-2xl);
  line-height: var(--tw-leading, var(--text-2xl--line-height));
  font-size: clamp(2rem, 3.1vw, 3rem);
  letter-spacing: -0.052em;
}
h3 {
  margin-bottom: calc(var(--spacing) * 2);
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  letter-spacing: -0.03em;
}
.section {
  padding-block: calc(var(--spacing) * 20);
  border-top: 1px solid var(--color-border);
}
.section > h2 {
  max-width: 720px;
}
.section > p:not(.example-label):not(.platform-flow) {
  max-width: 720px;
  color: var(--color-muted);
  font-size: 1.0625rem;
}
.section--final-cta {
  text-align: center;
  background: var(--color-deep);
  color: var(--color-primary-ink);
  border: 0;
  border-radius: 28px;
  margin: 3rem auto;
  max-width: calc(var(--max-width) - 3rem);
}
.section--final-cta h2 {
  margin-inline: auto;
}
.section--final-cta p {
  margin: 1.5rem auto 0;
  color: #c6d8d1 !important;
}
.section--final-cta .btn--primary {
  background: var(--color-accent);
  color: var(--color-deep);
}
.section--sage {
  margin-top: 3rem;
  margin-bottom: 3rem;
  padding: 4rem;
  border: 1px solid var(--color-border-sage);
  border-radius: var(--radius);
  background: var(--color-bg-sage);
}
.btn {
  display: inline-block;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 1px;
  border-color: transparent;
  padding-inline: calc(var(--spacing) * 5);
  padding-block: calc(var(--spacing) * 3);
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  text-decoration-line: none;
  border-radius: 999px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn--primary {
  background: var(--color-primary);
  color: var(--color-primary-ink);
  box-shadow: 0 9px 18px rgba(20,107,74,.18);
}
.btn--primary:hover {
  background: #0d5539;
  box-shadow: 0 12px 24px rgba(20,107,74,.26);
}
.btn--primary span {
  margin-left: .35rem;
}
.btn--secondary {
  color: var(--color-ink);
  border-color: var(--color-border);
  background: rgba(255,255,255,.55);
}
.btn--secondary:hover {
  background: #fff;
  box-shadow: 0 8px 16px rgba(23,34,44,.08);
}
.site-header {
  border-bottom: 1px solid rgba(219,227,226,.9);
  background: rgba(248,250,246,.9);
  backdrop-filter: blur(16px);
  position: relative;
  z-index: 2;
}
.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing) * 6);
  padding-inline: calc(var(--spacing) * 6);
  padding-block: calc(var(--spacing) * 4);
}
.brand {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  text-decoration-line: none;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  letter-spacing: -0.045em;
}
.brand__mark {
  align-items: center;
  background: var(--color-deep);
  border-radius: 9px;
  color: var(--color-accent);
  display: inline-flex;
  font-family: Georgia, serif;
  font-size: 1.25rem;
  font-style: italic;
  font-weight: 700;
  height: 1.85rem;
  justify-content: center;
  line-height: 1;
  width: 1.85rem;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 5);
  font-size: .9rem;
}
.site-nav a {
  text-decoration-line: none;
  color: var(--color-muted);
  transition: color .2s ease;
}
.site-nav a:hover {
  color: var(--color-primary);
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 4);
  white-space: nowrap;
}
.site-nav-mobile {
  display: none;
}
.hero {
  overflow: hidden;
  padding: clamp(4.25rem, 8vw, 7.5rem) 0 5.5rem;
  position: relative;
}
.hero::before {
  background: radial-gradient(circle, rgba(213,255,103,.8) 0 1px, transparent 1.5px);
  background-size: 15px 15px;
  content: '';
  height: 360px;
  opacity: .55;
  position: absolute;
  right: -100px;
  top: -90px;
  width: 430px;
}
.hero::after {
  background: #dff2dc;
  border-radius: 999px;
  content: '';
  filter: blur(2px);
  height: 400px;
  left: -170px;
  opacity: .85;
  position: absolute;
  top: 120px;
  width: 400px;
}
.hero__grid {
  align-items: center;
  display: grid;
  gap: clamp(2.5rem, 7vw, 6rem);
  grid-template-columns: minmax(0, 1.05fr) minmax(330px, .8fr);
  position: relative;
  z-index: 1;
}
.hero__copy {
  text-align: left;
}
.eyebrow {
  align-items: center;
  color: var(--color-primary);
  display: flex;
  font-size: .75rem;
  font-weight: 800;
  gap: .5rem;
  letter-spacing: .1em;
  margin: 0 0 1.3rem;
  text-transform: uppercase;
}
.eyebrow span {
  background: var(--color-accent);
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  height: .6rem;
  width: .6rem;
}
.hero__subheading {
  margin-bottom: calc(var(--spacing) * 8);
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  color: var(--color-muted);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.65;
  max-width: 36rem;
}
.hero__ctas {
  margin-bottom: calc(var(--spacing) * 6);
  display: flex;
  gap: calc(var(--spacing) * 4);
}
.hero__support {
  align-items: center;
  color: var(--color-muted);
  display: flex;
  font-size: .875rem;
  gap: .55rem;
}
.hero__support-dot {
  background: var(--color-accent);
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  height: .72rem;
  width: .72rem;
}
.feedback-preview {
  background: var(--color-warm);
  border: 1px solid rgba(18,58,49,.13);
  border-radius: 24px;
  box-shadow: 0 26px 60px rgba(18,58,49,.16), 0 5px 14px rgba(18,58,49,.08);
  padding: 1.5rem;
  position: relative;
  transform: rotate(2.5deg);
}
.feedback-preview::before {
  border: 1px solid rgba(20,107,74,.16);
  border-radius: 24px;
  content: '';
  inset: 11px -11px -11px 11px;
  position: absolute;
  z-index: -1;
}
.feedback-preview__topbar, .feedback-preview__score-row, .feedback-preview__reply {
  align-items: center;
  display: flex;
  justify-content: space-between;
}
.feedback-preview__topbar strong {
  display: block;
  font-size: 1.15rem;
  letter-spacing: -.04em;
}
.feedback-preview__eyebrow, .feedback-preview__label {
  color: var(--color-muted);
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.feedback-preview__live {
  align-items: center;
  background: #e3f5df;
  border-radius: 999px;
  color: #277343;
  display: flex;
  font-size: .7rem;
  font-weight: 700;
  gap: .35rem;
  padding: .35rem .6rem;
}
.feedback-preview__live i {
  background: #4eb76e;
  border-radius: 50%;
  height: .45rem;
  width: .45rem;
}
.feedback-preview__score-row {
  align-items: end;
  gap: 1rem;
  margin: 1.6rem 0;
}
.feedback-preview__score span {
  color: var(--color-muted);
  display: block;
  font-size: .76rem;
}
.feedback-preview__score strong {
  display: block;
  font-size: 3rem;
  letter-spacing: -.09em;
  line-height: 1;
}
.feedback-preview__score small {
  color: var(--color-primary);
  font-size: .7rem;
  font-weight: 700;
}
.feedback-preview__chart {
  align-items: end;
  display: flex;
  gap: .33rem;
  height: 4.4rem;
}
.feedback-preview__chart i {
  background: var(--color-primary);
  border-radius: 5px 5px 2px 2px;
  display: block;
  opacity: .9;
  width: .55rem;
}
.feedback-preview__chart i:nth-child(1) {
  height: 28%;
}
.feedback-preview__chart i:nth-child(2) {
  height: 46%;
}
.feedback-preview__chart i:nth-child(3) {
  height: 38%;
}
.feedback-preview__chart i:nth-child(4) {
  background: #64aa77;
  height: 67%;
}
.feedback-preview__chart i:nth-child(5) {
  height: 55%;
}
.feedback-preview__chart i:nth-child(6) {
  background: var(--color-accent);
  height: 88%;
}
.feedback-preview__chart i:nth-child(7) {
  height: 76%;
}
.feedback-preview__divider {
  background: var(--color-border);
  height: 1px;
  margin: 1.1rem 0;
}
.feedback-preview__label {
  margin-bottom: .65rem;
}
.feedback-preview__reply {
  border-radius: 12px;
  gap: .65rem;
  padding: .55rem .45rem;
}
.feedback-preview__reply--attention {
  background: #fff4e7;
}
.feedback-preview__avatar {
  align-items: center;
  background: #e7d8ff;
  border-radius: 50%;
  color: #6e419d;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .75rem;
  font-weight: 800;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}
.feedback-preview__avatar--second {
  background: #d8ecef;
  color: #237184;
}
.feedback-preview__reply div {
  flex: 1;
  line-height: 1.25;
}
.feedback-preview__reply strong, .feedback-preview__reply small {
  display: block;
}
.feedback-preview__reply strong {
  font-size: .78rem;
}
.feedback-preview__reply small {
  color: var(--color-muted);
  font-size: .65rem;
}
.feedback-preview__reply b {
  align-items: center;
  background: #e9f7e4;
  border-radius: 50%;
  color: var(--color-primary);
  display: inline-flex;
  font-size: .76rem;
  height: 1.6rem;
  justify-content: center;
  width: 1.6rem;
}
.feedback-preview__reply--attention b {
  background: #ffdba9;
  color: #965000;
}
.feedback-preview__note {
  background: var(--color-deep);
  border-radius: 10px;
  color: #e9f6ed;
  font-size: .72rem;
  font-weight: 600;
  margin-top: 1rem;
  padding: .72rem;
}
.feedback-preview__note span {
  color: var(--color-accent);
}
.steps {
  display: grid;
  gap: calc(var(--spacing) * 5);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  counter-reset: step;
}
.step {
  background: var(--color-warm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.5rem;
  position: relative;
}
.step:hover {
  box-shadow: 0 12px 25px rgba(23,34,44,.06);
  transform: translateY(-2px);
  transition: .2s ease;
}
.step__number {
  margin-bottom: calc(var(--spacing) * 4);
  display: inline-block;
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
  align-items: center;
  background: var(--color-accent);
  border-radius: 50%;
  color: var(--color-deep);
  display: inline-flex;
  font-size: .8rem;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}
.benefits {
  padding-left: calc(var(--spacing) * 5);
}
.benefits li {
  margin-bottom: calc(var(--spacing) * 2);
}
.feedback-cards {
  margin-bottom: calc(var(--spacing) * 6);
  display: grid;
  gap: calc(var(--spacing) * 5);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.feedback-card {
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 5);
  border-color: var(--color-border);
  border-radius: var(--radius);
  background: var(--color-warm);
  box-shadow: 0 8px 20px rgba(23,34,44,.04);
}
.feedback-card:first-child {
  border-left: 4px solid #e99c42;
}
.feedback-card:last-child {
  border-left: 4px solid #4aa56c;
}
.feedback-card__score {
  margin-bottom: calc(var(--spacing) * 2);
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
.feedback-card__meta {
  margin-top: calc(var(--spacing) * 2);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  color: var(--color-muted);
}
.score-scale {
  margin-block: calc(var(--spacing) * 4);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 2);
}
.score-scale__value {
  display: inline-flex;
  height: calc(var(--spacing) * 9);
  width: calc(var(--spacing) * 9);
  align-items: center;
  justify-content: center;
  border-radius: calc(infinity * 1px);
  border-style: var(--tw-border-style);
  border-width: 1px;
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  border-color: var(--color-border);
  background: var(--color-warm);
}
.score-scale__value:nth-child(-n+7) {
  background: #fff4e7;
  border-color: #f5d1a1;
}
.score-scale__value:nth-child(n+10) {
  background: #e7f6e8;
  border-color: #b9dfbd;
}
.code-sample {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  padding: calc(var(--spacing) * 5);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  background: var(--color-ink);
  color: #e5e8ec;
  border-radius: var(--radius);
}
.section--api {
  border-top: 0;
}
.api-showcase {
  background: var(--color-deep);
  border-radius: 26px;
  box-shadow: 0 20px 44px rgba(18,58,49,.16);
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(240px, .7fr);
  overflow: hidden;
  padding: clamp(1.1rem, 3vw, 2.4rem);
}
.api-showcase__terminal {
  background: #14242c;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 15px;
  min-width: 0;
  overflow: hidden;
}
.api-showcase__bar {
  align-items: center;
  background: rgba(255,255,255,.045);
  color: #91a6a4;
  display: flex;
  font-size: .68rem;
  gap: .35rem;
  letter-spacing: .04em;
  padding: .8rem 1rem;
  text-transform: uppercase;
}
.api-showcase__bar span {
  background: #d3dfda;
  border-radius: 50%;
  height: .45rem;
  opacity: .55;
  width: .45rem;
}
.api-showcase__bar span:first-child {
  background: #ec9a7f;
  opacity: 1;
}
.api-showcase__bar span:nth-child(2) {
  background: #e7ca70;
  opacity: 1;
}
.api-showcase__bar span:nth-child(3) {
  background: #79c292;
  opacity: 1;
}
.api-showcase__bar b {
  font-weight: 700;
  margin-left: .35rem;
}
.api-showcase .code-sample {
  background: transparent;
  border-radius: 0;
  color: #dce9e5;
  font-size: clamp(.72rem, 1.3vw, .9rem);
  line-height: 1.7;
  padding: 1.25rem;
}
.api-showcase__result {
  align-self: center;
  color: #eff8f1;
}
.api-showcase__result .eyebrow {
  color: var(--color-accent);
}
.api-showcase__result .eyebrow span {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.api-showcase__intro {
  font-size: 1.2rem;
  letter-spacing: -.025em;
  line-height: 1.45;
  margin: 0 0 1.5rem;
}
.api-showcase__handles {
  display: grid;
  gap: .5rem;
  margin: 0 0 1.8rem;
}
.api-showcase__handles li {
  align-items: center;
  color: #c5d9d0;
  display: flex;
  font-size: .86rem;
  gap: .55rem;
  text-transform: capitalize;
}
.api-showcase__handles span {
  align-items: center;
  background: rgba(213,255,103,.15);
  border-radius: 50%;
  color: var(--color-accent);
  display: inline-flex;
  font-size: .65rem;
  height: 1.1rem;
  justify-content: center;
  width: 1.1rem;
}
.api-showcase .btn--secondary {
  background: #fff;
  border-color: #fff;
  color: var(--color-deep);
}
.section--portability {
  border-top: 0;
}
.portability-showcase {
  background: #e5f0e8;
  border: 1px solid #cde0d2;
  border-radius: 26px;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4.5rem);
  position: relative;
}
.portability-showcase::after {
  background: radial-gradient(circle, rgba(20,107,74,.22) 0 1px, transparent 1.5px);
  background-size: 13px 13px;
  content: '';
  height: 250px;
  opacity: .65;
  position: absolute;
  right: -40px;
  top: -40px;
  width: 250px;
}
.portability-showcase__copy {
  max-width: 34rem;
  position: relative;
  z-index: 1;
}
.portability-showcase__copy > p:first-child {
  color: var(--color-muted);
  font-size: 1.05rem;
  margin: 0 0 1.4rem;
}
.portability-showcase__statement {
  color: var(--color-deep);
  font-size: clamp(1.35rem, 2.2vw, 2rem);
  font-weight: 750;
  letter-spacing: -.045em;
  line-height: 1.12;
  margin: 0;
}
.data-route {
  align-items: center;
  display: grid;
  gap: .45rem;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  margin: 3.25rem 0 1.4rem;
  position: relative;
  z-index: 1;
}
.data-route__node {
  background: rgba(255,253,248,.85);
  border: 1px solid rgba(20,107,74,.15);
  border-radius: 16px;
  min-height: 9rem;
  padding: 1.1rem;
}
.data-route__node strong, .data-route__node small {
  display: block;
}
.data-route__node strong {
  font-size: .95rem;
  letter-spacing: -.025em;
  margin-top: .8rem;
}
.data-route__node small {
  color: var(--color-muted);
  font-size: .7rem;
  line-height: 1.4;
  margin-top: .2rem;
}
.data-route__node--hub {
  background: var(--color-deep);
  border-color: var(--color-deep);
  color: #fff;
  box-shadow: 0 10px 20px rgba(18,58,49,.18);
  transform: translateY(-.5rem);
}
.data-route__node--hub small {
  color: #bed3ca;
}
.data-route__icon, .data-route__mark {
  align-items: center;
  background: #d8f0dd;
  border-radius: 9px;
  color: var(--color-primary);
  display: inline-flex;
  font-size: 1rem;
  height: 1.8rem;
  justify-content: center;
  width: 1.8rem;
}
.data-route__mark {
  background: var(--color-accent);
  color: var(--color-deep);
  font-family: Georgia, serif;
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 700;
}
.data-route__path {
  align-items: center;
  color: var(--color-primary);
  display: flex;
  gap: .15rem;
}
.data-route__path i {
  background: rgba(20,107,74,.3);
  height: 1px;
  width: 1rem;
}
.data-route__path b {
  font-size: 1rem;
}
.data-route__formats {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  position: relative;
  z-index: 1;
}
.data-route__formats li {
  background: rgba(255,253,248,.7);
  border: 1px solid rgba(20,107,74,.13);
  border-radius: 999px;
  color: #396355;
  font-size: .72rem;
  font-weight: 700;
  padding: .38rem .65rem;
}
.section--platform {
  border-top: 0;
  padding-top: 3rem;
}
.platform-showcase {
  background: var(--color-deep);
  border-radius: 28px;
  color: #fff;
  display: grid;
  gap: clamp(2.5rem, 5vw, 5rem);
  grid-template-columns: minmax(0, .85fr) minmax(400px, 1.15fr);
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4.5rem);
  position: relative;
}
.platform-showcase::after {
  background: radial-gradient(circle, rgba(213,255,103,.8) 0 1px, transparent 1.5px);
  background-size: 14px 14px;
  bottom: -55px;
  content: '';
  height: 220px;
  opacity: .24;
  position: absolute;
  right: -55px;
  width: 220px;
}
.platform-showcase__copy {
  position: relative;
  z-index: 1;
}
.platform-showcase__copy .eyebrow {
  color: var(--color-accent);
}
.platform-showcase__copy .eyebrow span {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.platform-showcase__copy h2 {
  font-size: clamp(2rem, 3.2vw, 3.35rem);
  margin-bottom: 1.25rem;
}
.platform-showcase__copy > p:not(.eyebrow) {
  color: #bdd4cb;
  font-size: 1.04rem;
  line-height: 1.6;
  margin-bottom: 1.7rem;
}
.platform-showcase__copy .btn--primary {
  background: var(--color-accent);
  box-shadow: none;
  color: var(--color-deep);
}
.platform-showcase__flow {
  align-items: stretch;
  display: grid;
  gap: .45rem;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  position: relative;
  z-index: 1;
}
.platform-showcase__flow > div {
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 9rem;
  padding: .8rem;
}
.platform-showcase__flow > div span {
  color: #9fc2b5;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.platform-showcase__flow > div strong {
  font-size: .84rem;
  letter-spacing: -.025em;
  line-height: 1.2;
}
.platform-showcase__flow > i {
  align-self: center;
  color: var(--color-accent);
  font-size: 1.2rem;
  font-style: normal;
}
.platform-showcase__flow .platform-showcase__learn {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-deep);
  transform: translateY(-.75rem);
}
.platform-showcase__flow .platform-showcase__learn span {
  color: var(--color-primary);
}
.platform-showcase__flow .platform-showcase__learn {
  transform: none;
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
}
.comparison-table th, .comparison-table td {
  padding: calc(var(--spacing) * 3);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.feature-grid {
  display: grid;
  gap: calc(var(--spacing) * 5);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.feature {
  background: var(--color-warm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.feature h3::before {
  color: var(--color-primary);
  content: '✦';
  display: block;
  font-size: 1rem;
  margin-bottom: 1rem;
}
.pricing-plans {
  display: grid;
  gap: calc(var(--spacing) * 6);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.pricing-plan {
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 7);
  border-color: var(--color-border);
  border-radius: var(--radius);
  background: var(--color-warm);
  box-shadow: 0 10px 20px rgba(23,34,44,.04);
}
.pricing-plan--highlighted {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary), 0 16px 30px rgba(20,107,74,.12);
  transform: translateY(-.4rem);
}
.pricing-plan__price {
  margin-block: calc(var(--spacing) * 2);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  --tw-font-weight: var(--font-weight-bold);
  font-weight: var(--font-weight-bold);
}
.pricing-plan__price span {
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  --tw-font-weight: var(--font-weight-normal);
  font-weight: var(--font-weight-normal);
  color: var(--color-muted);
}
.platform-flow {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.content-intro {
  font-size: var(--text-xl);
  line-height: var(--tw-leading, var(--text-xl--line-height));
  color: var(--color-muted);
}
.content-links {
  display: grid;
  gap: calc(var(--spacing) * 3);
}
.content-links a {
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
}
.example-label {
  margin-bottom: calc(var(--spacing) * 3);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-semibold);
  font-weight: var(--font-weight-semibold);
  --tw-tracking: var(--tracking-wide);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-muted);
}
.site-footer {
  padding-block: calc(var(--spacing) * 8);
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: .9rem;
}
.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(var(--spacing) * 4);
}
.site-footer nav {
  display: flex;
  gap: calc(var(--spacing) * 4);
}
.site-footer a {
  text-decoration-line: none;
}
.setup-showcase {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 7vw, 7rem);
  grid-template-columns: minmax(0, .9fr) minmax(290px, .75fr);
}
.setup-showcase h2 {
  font-size: clamp(2rem, 3.5vw, 3.25rem);
}
.setup-showcase > div > p:not(.eyebrow) {
  color: var(--color-muted);
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 38rem;
}
.setup-showcase .btn {
  margin-top: 1rem;
}
.setup-showcase__steps {
  counter-reset: setup-step;
  display: grid;
  gap: .7rem;
}
.setup-showcase__steps li {
  align-items: flex-start;
  background: rgba(255,253,248,.78);
  border: 1px solid #c9dfcd;
  border-radius: 13px;
  color: #385448;
  counter-increment: setup-step;
  display: flex;
  font-size: .9rem;
  gap: .75rem;
  line-height: 1.45;
  padding: 1rem;
}
.setup-showcase__steps li::before {
  align-items: center;
  background: var(--color-primary);
  border-radius: 50%;
  color: var(--color-accent);
  content: counter(setup-step);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .65rem;
  font-weight: 800;
  height: 1.45rem;
  justify-content: center;
  width: 1.45rem;
}
.section--owner {
  border-top: 0;
}
.owner-showcase {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 7vw, 7rem);
  grid-template-columns: minmax(0, .85fr) minmax(300px, .8fr);
}
.owner-showcase__copy h2 {
  font-size: clamp(2rem, 3.5vw, 3.3rem);
}
.owner-showcase__copy > p:not(.eyebrow) {
  color: var(--color-muted);
  font-size: 1.04rem;
  line-height: 1.65;
  max-width: 38rem;
}
.owner-showcase__copy .btn {
  margin-top: 1rem;
}
.owner-showcase__benefits {
  background: #f0f6f0;
  border: 1px solid #d4e4d7;
  border-radius: 20px;
  padding: 1.1rem;
}
.owner-showcase__pulse {
  align-items: flex-end;
  background: var(--color-deep);
  border-radius: 13px;
  color: #fff;
  display: flex;
  min-height: 7rem;
  padding: 1.1rem;
  position: relative;
}
.owner-showcase__pulse span {
  color: #a8c2b7;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .08em;
  position: absolute;
  text-transform: uppercase;
  top: 1rem;
}
.owner-showcase__pulse strong {
  font-size: 1.1rem;
  letter-spacing: -.035em;
  line-height: 1.2;
  max-width: 12rem;
}
.owner-showcase__pulse i {
  align-items: center;
  background: var(--color-accent);
  border-radius: 50%;
  color: var(--color-deep);
  display: inline-flex;
  font-size: 1.1rem;
  font-style: normal;
  height: 2rem;
  justify-content: center;
  margin-left: auto;
  width: 2rem;
}
.owner-showcase__benefits ul {
  display: grid;
  gap: .4rem;
  grid-template-columns: 1fr 1fr;
  margin-top: .8rem;
}
.owner-showcase__benefits li {
  align-items: center;
  color: #486158;
  display: flex;
  font-size: .75rem;
  gap: .4rem;
  line-height: 1.35;
}
.owner-showcase__benefits li span {
  align-items: center;
  background: #dff2e2;
  border-radius: 50%;
  color: var(--color-primary);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .58rem;
  height: 1rem;
  justify-content: center;
  width: 1rem;
}
.section--inbox {
  border-top: 0;
}
.inbox-showcase {
  background: #fffdf8;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  display: grid;
  gap: clamp(2rem, 7vw, 7rem);
  grid-template-columns: minmax(0, .85fr) minmax(330px, .8fr);
  padding: clamp(2rem, 5vw, 4.2rem);
}
.inbox-showcase__copy h2 {
  font-size: clamp(2rem, 3.4vw, 3.2rem);
}
.inbox-showcase__copy > p:not(.eyebrow) {
  color: var(--color-muted);
  line-height: 1.65;
}
.inbox-showcase__replies {
  background: #f3f7f3;
  border: 1px solid #dce8de;
  border-radius: 16px;
  padding: 1rem;
}
.inbox-showcase .feedback-cards {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}
.inbox-showcase .feedback-card {
  box-shadow: none;
}
.inbox-showcase__footer {
  color: var(--color-primary);
  font-size: .74rem;
  font-weight: 750;
  margin: 1rem .2rem .15rem;
}
.inbox-showcase__footer span {
  color: #e79b45;
}
.section--response {
  border-top: 0;
  padding-top: 2rem;
}
.response-showcase {
  background: var(--color-deep);
  border-radius: 24px;
  color: #fff;
  display: grid;
  gap: clamp(2rem, 7vw, 7rem);
  grid-template-columns: minmax(0, .85fr) minmax(310px, .8fr);
  overflow: hidden;
  padding: clamp(2rem, 5vw, 4.2rem);
  position: relative;
}
.response-showcase::after {
  background: radial-gradient(circle, rgba(213,255,103,.8) 0 1px, transparent 1.5px);
  background-size: 14px 14px;
  bottom: -55px;
  content: '';
  height: 200px;
  opacity: .2;
  position: absolute;
  right: -45px;
  width: 200px;
}
.response-showcase .eyebrow {
  color: var(--color-accent);
}
.response-showcase .eyebrow span {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.response-showcase__copy {
  position: relative;
  z-index: 1;
}
.response-showcase__copy h2 {
  font-size: clamp(2rem, 3.4vw, 3.2rem);
}
.response-showcase__copy > p:not(.eyebrow) {
  color: #bed4cb;
  line-height: 1.65;
}
.response-showcase__steps {
  counter-reset: response-step;
  display: grid;
  gap: .7rem;
  position: relative;
  z-index: 1;
}
.response-showcase__steps li {
  align-items: center;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 13px;
  color: #d9e8e1;
  counter-increment: response-step;
  display: flex;
  font-size: .85rem;
  gap: .7rem;
  line-height: 1.4;
  padding: .9rem;
}
.response-showcase__steps li::before {
  align-items: center;
  background: var(--color-accent);
  border-radius: 50%;
  color: var(--color-deep);
  content: counter(response-step);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .65rem;
  font-weight: 800;
  height: 1.4rem;
  justify-content: center;
  width: 1.4rem;
}
.content-hero {
  background: #edf5ee;
  border-bottom: 1px solid #d8e5da;
  overflow: hidden;
  padding: clamp(4rem, 8vw, 7.5rem) 0 clamp(3.5rem, 6vw, 5.75rem);
  position: relative;
}
.content-hero::after {
  background: radial-gradient(circle, rgba(20,107,74,.25) 0 1px, transparent 1.5px);
  background-size: 14px 14px;
  border: 1px solid rgba(20,107,74,.14);
  border-radius: 50%;
  content: '';
  height: min(36vw, 400px);
  position: absolute;
  right: max(-10vw, -120px);
  top: -120px;
  width: min(36vw, 400px);
}
.content-hero .container {
  max-width: 900px;
  position: relative;
  z-index: 1;
}
.content-hero h1 {
  font-size: clamp(3rem, 6vw, 5.5rem);
  margin-bottom: 1.4rem;
  max-width: 840px;
}
.content-hero .content-intro {
  color: #52635d;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.65;
  max-width: 690px;
}
.content-hero__reviewed {
  align-items: center;
  color: #60736a;
  display: flex;
  font-size: .78rem;
  gap: .4rem;
  margin: 1.7rem 0 0;
}
.content-hero__reviewed span {
  color: var(--color-primary);
  font-size: 1rem;
}
main {
  counter-reset: content-section;
}
.content-section {
  counter-increment: content-section;
  padding: clamp(3.5rem, 7vw, 6.5rem) 0;
  position: relative;
}
.content-section:nth-of-type(odd) {
  background: #f1f6f1;
}
.content-section__grid {
  display: grid;
  gap: clamp(1.5rem, 6vw, 7rem);
  grid-template-columns: 5rem minmax(0, 710px);
}
.content-section__ordinal {
  align-items: center;
  border: 1px solid #c9ddd0;
  border-radius: 50%;
  color: var(--color-primary);
  display: inline-flex;
  font-size: .75rem;
  font-weight: 800;
  height: 2.4rem;
  justify-content: center;
  margin-top: .35rem;
  width: 2.4rem;
}
.content-section__ordinal::before {
  content: '0' counter(content-section);
}
.content-section article h2 {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  margin-bottom: 1.35rem;
}
.content-section article p {
  color: #53625f;
  font-size: 1.06rem;
  line-height: 1.75;
  margin-bottom: 1.15rem;
}
.content-section__bullets {
  display: grid;
  gap: .75rem;
  margin-top: 1.75rem;
}
.content-section__bullets li {
  align-items: flex-start;
  background: rgba(255,253,248,.75);
  border: 1px solid #dbe6dd;
  border-radius: 12px;
  color: #465650;
  display: flex;
  font-size: .94rem;
  gap: .7rem;
  line-height: 1.5;
  padding: .85rem 1rem;
}
.content-section__bullets li span {
  align-items: center;
  background: #d9f3df;
  border-radius: 50%;
  color: var(--color-primary);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .65rem;
  height: 1.1rem;
  justify-content: center;
  margin-top: .1rem;
  width: 1.1rem;
}
.section--related {
  border-top: 0;
}
.content-links--cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.content-links--cards li a {
  align-items: center;
  background: var(--color-warm);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  min-height: 5rem;
  padding: 1rem 1.15rem;
  transition: border .2s ease, box-shadow .2s ease, transform .2s ease;
}
.content-links--cards li a:hover {
  border-color: #9bc6a6;
  box-shadow: 0 10px 18px rgba(18,58,49,.07);
  transform: translateY(-2px);
}
.content-links--cards li a span {
  max-width: 25rem;
}
.content-links--cards li b {
  align-items: center;
  background: #e2f3e4;
  border-radius: 50%;
  color: var(--color-primary);
  display: inline-flex;
  font-size: .9rem;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}
.content-final-cta {
  margin-top: 4rem;
}
.section--question {
  border-top: 0;
}
.question-showcase {
  background: #e8f2e9;
  border: 1px solid #cde0d1;
  border-radius: 24px;
  display: grid;
  gap: 1.1rem;
  grid-template-columns: minmax(0, .75fr) minmax(330px, 1fr);
  padding: clamp(2rem, 5vw, 4rem);
}
.question-showcase__intro {
  padding-right: clamp(0rem, 4vw, 4rem);
}
.question-showcase__intro h2 {
  font-size: clamp(2rem, 3.3vw, 3rem);
}
.question-showcase__intro > p:not(.eyebrow) {
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.6;
}
.question-showcase__prompt {
  background: #fffdf8;
  border: 1px solid #d5e3d7;
  border-radius: 16px;
  padding: 1.3rem;
}
.question-showcase__prompt > strong {
  color: var(--color-deep);
  font-size: 1rem;
  letter-spacing: -.025em;
}
.question-showcase__prompt .score-scale {
  justify-content: space-between;
}
.question-showcase__prompt .score-scale__value {
  height: clamp(1.65rem, 3vw, 2.2rem);
  width: clamp(1.65rem, 3vw, 2.2rem);
}
.question-showcase__legend {
  color: var(--color-muted);
  display: flex;
  font-size: .6rem;
  justify-content: space-between;
  margin-top: .1rem;
}
.question-showcase__prompts {
  display: grid;
  gap: .65rem;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, 1fr);
  margin-top: .4rem;
}
.question-showcase__prompts li {
  background: rgba(255,253,248,.65);
  border: 1px solid rgba(20,107,74,.14);
  border-radius: 12px;
  padding: .85rem;
}
.question-showcase__prompts strong {
  color: var(--color-primary);
  display: block;
  font-size: .72rem;
  margin-bottom: .35rem;
}
.question-showcase__prompts span {
  color: #50645c;
  font-size: .78rem;
  line-height: 1.4;
}
.section--trust {
  border-top: 0;
}
.section--comparison {
  border-top: 0;
}
.comparison-showcase {
  background: #f3f7f3;
  border: 1px solid #dbe7dc;
  border-radius: 24px;
  display: grid;
  gap: clamp(2rem, 7vw, 7rem);
  grid-template-columns: minmax(0, .7fr) minmax(400px, 1fr);
  padding: clamp(2rem, 5vw, 4.2rem);
}
.comparison-showcase h2 {
  font-size: clamp(2rem, 3.3vw, 3.1rem);
}
.comparison-showcase > div > p:not(.eyebrow) {
  color: var(--color-muted);
  line-height: 1.65;
}
.comparison-table--rich {
  background: #fffdf8;
  border: 1px solid #d7e4d9;
  border-radius: 15px;
  overflow: hidden;
}
.comparison-table--rich th {
  background: var(--color-deep);
  color: #fff;
  font-size: .72rem;
  letter-spacing: .04em;
}
.comparison-table--rich th:last-child {
  color: var(--color-accent);
}
.comparison-table--rich td {
  color: #596961;
  font-size: .78rem;
  line-height: 1.35;
}
.comparison-table--rich td:last-child {
  color: #246143;
  font-weight: 700;
}
.comparison-table--rich tr:last-child td {
  border-bottom: 0;
}
.section--guides {
  border-top: 0;
}
.home-guide-links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-guide-links li a {
  align-items: center;
  background: var(--color-warm);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  display: flex;
  gap: .8rem;
  justify-content: space-between;
  min-height: 5rem;
  padding: 1rem 1.15rem;
  transition: border .2s ease, box-shadow .2s ease, transform .2s ease;
}
.home-guide-links li a:hover {
  border-color: #9dc8a7;
  box-shadow: 0 10px 18px rgba(18,58,49,.07);
  transform: translateY(-2px);
}
.home-guide-links li a span {
  max-width: 28rem;
}
.home-guide-links li b {
  align-items: center;
  background: #e2f3e4;
  border-radius: 50%;
  color: var(--color-primary);
  display: inline-flex;
  flex: 0 0 auto;
  height: 1.7rem;
  justify-content: center;
  width: 1.7rem;
}
.pricing-hero {
  background: var(--color-deep);
  color: #fff;
  overflow: hidden;
  padding: clamp(4rem, 8vw, 7.5rem) 0;
  position: relative;
}
.pricing-hero::after {
  background: radial-gradient(circle, rgba(213,255,103,.8) 0 1px, transparent 1.5px);
  background-size: 15px 15px;
  content: '';
  height: 350px;
  opacity: .22;
  position: absolute;
  right: -45px;
  top: -50px;
  width: 350px;
}
.pricing-hero__grid {
  align-items: center;
  display: grid;
  gap: clamp(2rem, 8vw, 8rem);
  grid-template-columns: minmax(0, 1fr) minmax(235px, .42fr);
  position: relative;
  z-index: 1;
}
.pricing-hero h1 {
  font-size: clamp(3rem, 5.4vw, 5.25rem);
  margin-bottom: 1.25rem;
  max-width: 720px;
}
.pricing-hero__grid > div > p:not(.eyebrow) {
  color: #c5d8cf;
  font-size: 1.1rem;
  line-height: 1.65;
  max-width: 690px;
}
.pricing-hero .eyebrow {
  color: var(--color-accent);
}
.pricing-hero .eyebrow span {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.pricing-hero__trial {
  background: #fffdf8;
  border-radius: 18px;
  box-shadow: 0 22px 40px rgba(0,0,0,.18);
  color: var(--color-deep);
  padding: 1.5rem;
  transform: rotate(2deg);
}
.pricing-hero__trial-mark {
  align-items: center;
  background: var(--color-accent);
  border-radius: 10px;
  display: inline-flex;
  height: 2.1rem;
  justify-content: center;
  margin-bottom: 1rem;
  width: 2.1rem;
}
.pricing-hero__trial strong {
  display: block;
  font-size: 1rem;
  letter-spacing: -.025em;
}
.pricing-hero__trial div {
  align-items: end;
  display: flex;
  gap: .45rem;
  margin: .8rem 0 .2rem;
}
.pricing-hero__trial div b {
  color: var(--color-primary);
  font-size: 3.6rem;
  letter-spacing: -.08em;
  line-height: .9;
}
.pricing-hero__trial div span {
  color: var(--color-muted);
  font-size: .82rem;
  margin-bottom: .2rem;
}
.pricing-hero__trial small {
  color: #62746d;
  font-size: .76rem;
  line-height: 1.55;
}
.section--pricing {
  border-top: 0;
}
.pricing-plans {
  align-items: stretch;
}
.pricing-plan {
  display: flex;
  flex-direction: column;
  position: relative;
}
.pricing-plan h2 {
  font-size: 1.5rem;
  margin-bottom: .4rem;
}
.pricing-plan > p:not(.pricing-plan__price):not(.pricing-plan__tag) {
  color: var(--color-muted);
  font-size: .92rem;
  min-height: 3rem;
}
.pricing-plan__annual {
  color: var(--color-primary) !important;
  font-size: .8rem !important;
  font-weight: 700;
  min-height: 0 !important;
}
.pricing-plan__tag {
  background: var(--color-accent);
  border-radius: 999px;
  color: var(--color-deep);
  font-size: .68rem;
  font-weight: 800;
  left: 1.3rem;
  letter-spacing: .06em;
  padding: .32rem .6rem;
  position: absolute;
  text-transform: uppercase;
  top: -1rem;
}
.pricing-plan__features {
  display: grid;
  gap: .75rem;
  margin: 1.5rem 0 1.8rem;
}
.pricing-plan__features li {
  align-items: flex-start;
  color: #4f5f5b;
  display: flex;
  font-size: .85rem;
  gap: .55rem;
  line-height: 1.45;
}
.pricing-plan__features span {
  align-items: center;
  background: #d9f3df;
  border-radius: 50%;
  color: var(--color-primary);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .62rem;
  height: 1.05rem;
  justify-content: center;
  margin-top: .08rem;
  width: 1.05rem;
}
.pricing-plan .btn {
  margin-top: auto;
  text-align: center;
}
.pricing-plan--highlighted {
  background: #f8fff6;
}
.platform-page-hero {
  background: var(--color-deep);
  color: #fff;
  overflow: hidden;
  padding: clamp(4rem, 8vw, 7.5rem) 0;
  position: relative;
}
.platform-page-hero::before {
  background: radial-gradient(circle, rgba(213,255,103,.75) 0 1px, transparent 1.5px);
  background-size: 14px 14px;
  content: '';
  height: 400px;
  opacity: .2;
  position: absolute;
  right: -95px;
  top: -120px;
  width: 400px;
}
.platform-page-hero__grid {
  align-items: center;
  display: grid;
  gap: clamp(2.5rem, 8vw, 8rem);
  grid-template-columns: minmax(0, 1fr) minmax(290px, .65fr);
  position: relative;
  z-index: 1;
}
.platform-page-hero h1 {
  font-size: clamp(3rem, 5.1vw, 5rem);
  max-width: 750px;
}
.platform-page-hero__grid > div > p:not(.eyebrow):not(.platform-page-hero__flow) {
  color: #c4d7ce;
  font-size: 1.1rem;
  line-height: 1.65;
  max-width: 650px;
}
.platform-page-hero .eyebrow {
  color: var(--color-accent);
}
.platform-page-hero .eyebrow span {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.platform-page-hero__flow {
  color: var(--color-accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  margin-top: 1.8rem;
}
.platform-page-hero__accounts {
  background: #fffdf8;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 18px;
  box-shadow: 0 25px 45px rgba(0,0,0,.22);
  color: var(--color-deep);
  padding: 1.1rem;
  transform: rotate(2deg);
}
.platform-page-hero__accounts-bar {
  align-items: center;
  border-bottom: 1px solid #e0e8e1;
  color: #62746d;
  display: flex;
  font-size: .7rem;
  font-weight: 700;
  justify-content: space-between;
  padding: .25rem .1rem .85rem;
  text-transform: uppercase;
}
.platform-page-hero__accounts-bar b {
  color: var(--color-primary);
  font-size: 1.2rem;
}
.platform-page-hero__account {
  align-items: center;
  display: flex;
  gap: .65rem;
  padding: .9rem .1rem;
}
.platform-page-hero__account + .platform-page-hero__account {
  border-top: 1px solid #e5ede6;
}
.platform-page-hero__account > span {
  align-items: center;
  background: #e5d9fa;
  border-radius: 9px;
  color: #7244a0;
  display: inline-flex;
  font-size: .7rem;
  font-weight: 800;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}
.platform-page-hero__account:nth-child(3) > span {
  background: #dbeeed;
  color: #2c7780;
}
.platform-page-hero__account--more > span {
  background: var(--color-accent) !important;
  color: var(--color-deep) !important;
}
.platform-page-hero__account div {
  flex: 1;
  line-height: 1.25;
}
.platform-page-hero__account strong, .platform-page-hero__account small {
  display: block;
}
.platform-page-hero__account strong {
  font-size: .78rem;
}
.platform-page-hero__account small {
  color: var(--color-muted);
  font-size: .64rem;
}
.platform-page-hero__account i {
  color: var(--color-primary);
  font-size: .9rem;
  font-style: normal;
}
.section--platform-benefits {
  border-top: 0;
}
.platform-benefits {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2.5rem;
  overflow: hidden;
  border-radius: 18px;
}
.platform-benefits li {
  align-items: flex-start;
  background: #e5f0e8;
  display: flex;
  font-size: 1rem;
  font-weight: 650;
  gap: .8rem;
  min-height: 7rem;
  padding: 1.5rem;
}
.platform-benefits span {
  align-items: center;
  background: var(--color-primary);
  border-radius: 8px;
  color: var(--color-accent);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .72rem;
  height: 1.65rem;
  justify-content: center;
  width: 1.65rem;
}
.section--platform-product {
  border-top: 0;
  padding-top: 2rem;
}
.platform-product {
  background: #f3f7f3;
  border: 1px solid #d8e4d9;
  border-radius: 22px;
  display: grid;
  gap: clamp(2rem, 6vw, 6rem);
  grid-template-columns: minmax(0, .8fr) minmax(360px, 1fr);
  padding: clamp(2rem, 5vw, 4rem);
}
.platform-product > div > p:not(.eyebrow) {
  color: var(--color-muted);
  line-height: 1.65;
}
.platform-product__flow {
  align-items: stretch;
  display: grid;
  gap: .4rem;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
}
.platform-product__flow span {
  align-items: center;
  background: var(--color-warm);
  border: 1px solid #d5e3d6;
  border-radius: 12px;
  color: #36564a;
  display: flex;
  font-size: .78rem;
  font-weight: 700;
  justify-content: center;
  padding: .8rem .4rem;
  text-align: center;
}
.platform-product__flow i {
  align-self: center;
  color: var(--color-primary);
  font-style: normal;
}
.section--platform-setup {
  border-top: 0;
}
.platform-setup__heading {
  max-width: 680px;
}
.platform-setup {
  background: var(--color-deep);
  border-radius: 22px;
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  grid-template-columns: minmax(0, .75fr) minmax(330px, 1fr);
  margin-top: 2rem;
  overflow: hidden;
  padding: clamp(1.3rem, 4vw, 3.5rem);
}
.platform-setup ol {
  counter-reset: platform-step;
  display: grid;
  gap: .85rem;
}
.platform-setup li {
  align-items: center;
  color: #d9e8e1;
  counter-increment: platform-step;
  display: flex;
  font-size: .9rem;
  gap: .65rem;
}
.platform-setup li::before {
  align-items: center;
  background: var(--color-accent);
  border-radius: 50%;
  color: var(--color-deep);
  content: counter(platform-step);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: .67rem;
  font-weight: 800;
  height: 1.4rem;
  justify-content: center;
  width: 1.4rem;
}
.platform-setup__code {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  padding: 1rem;
}
.platform-setup__code > span {
  color: var(--color-accent);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.platform-setup__code .code-sample {
  background: transparent;
  font-size: .7rem;
  line-height: 1.6;
  padding: 1rem 0;
}
.platform-setup__code .btn {
  background: var(--color-accent);
  box-shadow: none;
  color: var(--color-deep);
}
.developer-hero {
  background: var(--color-deep);
  color: #fff;
  overflow: hidden;
  padding: clamp(4rem, 8vw, 7rem) 0;
  position: relative;
}
.developer-hero::before {
  background: radial-gradient(circle, rgba(213,255,103,.75) 0 1px, transparent 1.5px);
  background-size: 14px 14px;
  content: '';
  height: 350px;
  opacity: .21;
  position: absolute;
  right: -80px;
  top: -75px;
  width: 350px;
}
.developer-hero__grid {
  align-items: center;
  display: grid;
  gap: clamp(2.5rem, 6vw, 6rem);
  grid-template-columns: minmax(0, .85fr) minmax(360px, 1.15fr);
  position: relative;
  z-index: 1;
}
.developer-hero__copy h1 {
  font-size: clamp(3rem, 5.3vw, 5.25rem);
  margin-bottom: 1.3rem;
}
.developer-hero__copy > p:not(.eyebrow):not(.developer-hero__support) {
  color: #c7d9d1;
  font-size: 1.15rem;
  line-height: 1.65;
  max-width: 34rem;
}
.developer-hero .eyebrow {
  color: var(--color-accent);
}
.developer-hero .eyebrow span {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.developer-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 1.7rem 0;
}
.developer-hero__tags span {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  color: #d8e7e0;
  font-size: .7rem;
  font-weight: 700;
  padding: .38rem .65rem;
}
.developer-hero__support {
  border-left: 2px solid var(--color-accent);
  color: #a9c1b6;
  font-size: .85rem;
  line-height: 1.6;
  margin: 0;
  padding-left: .75rem;
}
.developer-hero__support code {
  color: var(--color-accent);
}
.developer-hero__request {
  background: #10232b;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow: 0 24px 50px rgba(0,0,0,.2);
  overflow: hidden;
  transform: rotate(1.5deg);
}
.developer-hero__terminal-bar {
  align-items: center;
  background: rgba(255,255,255,.06);
  color: #a9bdb5;
  display: flex;
  font-size: .68rem;
  gap: .32rem;
  letter-spacing: .07em;
  padding: .8rem 1rem;
  text-transform: uppercase;
}
.developer-hero__terminal-bar span {
  background: #ec9a7f;
  border-radius: 50%;
  height: .45rem;
  width: .45rem;
}
.developer-hero__terminal-bar span:nth-child(2) {
  background: #e7ca70;
}
.developer-hero__terminal-bar span:nth-child(3) {
  background: #79c292;
}
.developer-hero__terminal-bar b {
  margin-left: .4rem;
}
.developer-hero__request .code-sample {
  background: transparent;
  border-radius: 0;
  color: #dce9e5;
  font-size: clamp(.67rem, 1.15vw, .83rem);
  line-height: 1.65;
  padding: 1.2rem;
}
.developer-hero__result {
  align-items: center;
  background: #e0f3df;
  color: var(--color-deep);
  display: flex;
  gap: .7rem;
  padding: .85rem 1rem;
}
.developer-hero__success {
  align-items: center;
  background: #4caa68;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: .7rem;
  height: 1.25rem;
  justify-content: center;
  width: 1.25rem;
}
.developer-hero__result div {
  flex: 1;
  line-height: 1.2;
}
.developer-hero__result small, .developer-hero__result strong {
  display: block;
}
.developer-hero__result small {
  color: #407051;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.developer-hero__result strong {
  font-size: .78rem;
}
.developer-hero__result code {
  background: rgba(20,107,74,.12);
  border-radius: 5px;
  color: #2b6d43;
  font-size: .66rem;
  padding: .25rem .35rem;
}
.section--developer-foundations {
  border-top: 0;
}
.developer-section-heading {
  max-width: 42rem;
}
.developer-foundations {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: minmax(235px, .55fr) minmax(0, 1.45fr);
}
.developer-foundations__checklist {
  background: #e6f0e7;
  border: 1px solid #cee0d2;
  border-radius: 18px;
  padding: 1.6rem;
}
.developer-foundations__checklist p {
  color: var(--color-muted);
  font-size: .9rem;
  line-height: 1.55;
}
.developer-foundations__checklist ul {
  display: grid;
  gap: .5rem;
  margin-top: 1.3rem;
}
.developer-foundations__checklist li {
  align-items: center;
  display: flex;
  font-size: .84rem;
  gap: .5rem;
  text-transform: capitalize;
}
.developer-foundations__checklist li span {
  align-items: center;
  background: var(--color-primary);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: .62rem;
  height: 1rem;
  justify-content: center;
  width: 1rem;
}
.developer-features {
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.developer-features .feature {
  min-height: 10rem;
}
.developer-features .feature h3::before {
  content: '↗';
}
.section--auth {
  border-top: 0;
  padding-top: 2rem;
}
.auth-showcase {
  background: #f0f5f1;
  border: 1px solid var(--color-border);
  border-radius: 24px;
  display: grid;
  gap: clamp(2rem, 7vw, 7rem);
  grid-template-columns: minmax(0, .85fr) minmax(270px, .55fr);
  padding: clamp(2rem, 5vw, 4rem);
}
.auth-showcase__copy h2 {
  margin-bottom: 1.1rem;
}
.auth-showcase__copy p:not(.eyebrow) {
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 38rem;
}
.auth-showcase__code {
  align-self: center;
  background: var(--color-deep);
  border-radius: 14px;
  color: #dcebe4;
  padding: 1.1rem;
}
.auth-showcase__code > span {
  color: var(--color-accent);
  display: block;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.auth-showcase__code .code-sample {
  background: transparent;
  color: #fff;
  font-size: .8rem;
  padding: 1.5rem 0 .9rem;
}
.auth-showcase__code small {
  color: #a9c1b6;
  font-size: .72rem;
}
.section--reference {
  border-top: 0;
}
.developer-section-heading > p:not(.eyebrow) {
  color: var(--color-muted);
  font-size: 1rem;
  line-height: 1.65;
}
.endpoint-reference {
  display: grid;
  gap: .85rem;
  margin-top: 2.5rem;
}
.endpoint-reference__item {
  background: var(--color-warm);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden;
}
.endpoint-reference__item[open] {
  border-color: #b8d6c0;
  box-shadow: 0 10px 24px rgba(18,58,49,.055);
}
.endpoint-reference__item summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: .85rem;
  grid-template-columns: auto minmax(10rem, .8fr) minmax(0, 1.7fr) auto;
  list-style: none;
  padding: 1.05rem 1.2rem;
}
.endpoint-reference__item summary::-webkit-details-marker {
  display: none;
}
.endpoint-reference__item summary:hover {
  background: #f5faf5;
}
.endpoint-method {
  border-radius: 6px;
  color: #fff;
  font-size: .61rem;
  font-weight: 850;
  letter-spacing: .06em;
  padding: .3rem .4rem;
  text-align: center;
}
.endpoint-method--post {
  background: #176b4c;
}
.endpoint-method--get {
  background: #2f6d8a;
}
.endpoint-reference__item summary > code {
  color: var(--color-deep);
  font-size: .8rem;
  font-weight: 800;
}
.endpoint-reference__summary strong, .endpoint-reference__summary small {
  display: block;
}
.endpoint-reference__summary strong {
  color: #273a35;
  font-size: .87rem;
  margin-bottom: .16rem;
}
.endpoint-reference__summary small {
  color: var(--color-muted);
  font-size: .74rem;
  line-height: 1.4;
}
.endpoint-reference__toggle {
  align-items: center;
  background: #e8f4e9;
  border-radius: 50%;
  color: var(--color-primary);
  display: inline-flex;
  font-size: 1.2rem;
  height: 1.55rem;
  justify-content: center;
  line-height: 1;
  transition: transform .2s ease;
  width: 1.55rem;
}
.endpoint-reference__item[open] .endpoint-reference__toggle {
  transform: rotate(45deg);
}
.endpoint-reference__content {
  border-top: 1px solid var(--color-border);
  padding: 1.3rem;
}
.endpoint-reference__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-bottom: 1.4rem;
}
.endpoint-reference__meta span {
  background: #edf5ee;
  border: 1px solid #d6e6d8;
  border-radius: 999px;
  color: #496359;
  font-size: .72rem;
  padding: .35rem .65rem;
}
.endpoint-reference__meta b {
  color: var(--color-primary);
  font-size: .62rem;
  letter-spacing: .06em;
  margin-right: .35rem;
  text-transform: uppercase;
}
.endpoint-parameters h3, .endpoint-reference__examples h3 {
  color: var(--color-deep);
  font-size: .92rem;
  margin: 0 0 .7rem;
}
.endpoint-parameters dl {
  border-top: 1px solid #e0e9e1;
}
.endpoint-parameters dl > div {
  border-bottom: 1px solid #e0e9e1;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(11rem, .55fr) minmax(0, 1.45fr);
  padding: .85rem 0;
}
.endpoint-parameters dt span {
  color: var(--color-primary);
  display: block;
  font-size: .58rem;
  font-weight: 850;
  letter-spacing: .07em;
  margin-bottom: .26rem;
  text-transform: uppercase;
}
.endpoint-parameters dt code {
  color: #344b42;
  font-size: .76rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}
.endpoint-parameters dd {
  margin: 0;
}
.endpoint-parameters dd em {
  color: #7c568e;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .66rem;
  font-style: normal;
}
.endpoint-parameters dd strong {
  background: #f3f3f0;
  border-radius: 999px;
  color: #69726c;
  font-size: .6rem;
  margin-left: .45rem;
  padding: .2rem .4rem;
  text-transform: uppercase;
}
.endpoint-parameters dd strong.is-required {
  background: #fff0df;
  color: #9a581c;
}
.endpoint-parameters dd p {
  color: #5c6d65;
  font-size: .76rem;
  line-height: 1.5;
  margin: .35rem 0 0;
}
.endpoint-reference__examples {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.5rem;
}
.endpoint-reference__examples section {
  background: #f2f7f2;
  border: 1px solid #dbe9dc;
  border-radius: 12px;
  padding: 1rem;
}
.endpoint-reference__examples .code-sample {
  background: #112b2b;
  color: #dce9e5;
  font-size: .68rem;
  line-height: 1.6;
  margin: 0;
}
.endpoint-reference__notes {
  display: grid;
  gap: .42rem;
  margin-top: 1.15rem;
}
.endpoint-reference__notes li {
  color: #496359;
  display: flex;
  font-size: .75rem;
  gap: .45rem;
  line-height: 1.5;
}
.endpoint-reference__notes span {
  color: var(--color-primary);
  font-weight: 850;
}
.reference-reads {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 2.5rem;
}
.reference-reads article {
  background: var(--color-warm);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 1.35rem;
}
.reference-reads article:last-child {
  grid-column: span 2;
}
.reference-reads__label {
  color: var(--color-primary);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .09em;
  margin: 0 0 .6rem;
  text-transform: uppercase;
}
.reference-reads h3 {
  font-size: 1.1rem;
}
.reference-reads article > p:not(.reference-reads__label) {
  color: var(--color-muted);
  font-size: .84rem;
  line-height: 1.55;
}
.reference-reads .code-sample {
  font-size: .72rem;
  line-height: 1.6;
  margin-top: 1.2rem;
}
.reference-reads__error {
  background: #fff8f0 !important;
  border-color: #f0d4b2 !important;
}
.reference-reads__error .reference-reads__label {
  color: #a25a21;
}
.reference-reads__error .code-sample {
  background: #2b2b2a;
}
.section--accounts {
  border-top: 0;
}
.accounts-showcase {
  align-items: center;
  background: #eef5ef;
  border: 1px solid #d2e3d5;
  border-radius: 24px 24px 0 0;
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, .9fr) minmax(300px, .8fr);
  padding: clamp(2rem, 5vw, 4rem);
}
.accounts-showcase__copy > p:not(.eyebrow) {
  color: var(--color-muted);
  line-height: 1.65;
}
.accounts-showcase__code {
  background: #fffdf8;
  border-radius: 15px;
  box-shadow: 0 12px 22px rgba(18,58,49,.09);
  padding: 1rem;
}
.accounts-showcase__code > span {
  color: var(--color-primary);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.accounts-showcase__code .code-sample {
  font-size: .72rem;
  line-height: 1.6;
  margin-top: .7rem;
}
.accounts-steps {
  background: var(--color-deep);
  border-radius: 0 0 24px 24px;
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
}
.accounts-steps article {
  background: rgba(255,255,255,.035);
  color: #fff;
  padding: 1.5rem;
}
.accounts-steps article > span {
  align-items: center;
  background: var(--color-accent);
  border-radius: 50%;
  color: var(--color-deep);
  display: inline-flex;
  font-size: .68rem;
  font-weight: 800;
  height: 1.45rem;
  justify-content: center;
  width: 1.45rem;
}
.accounts-steps h3 {
  font-size: .95rem;
  margin: .9rem 0 .35rem;
}
.accounts-steps p {
  color: #bed3ca;
  font-size: .8rem;
  line-height: 1.5;
}
.accounts-steps .code-sample {
  background: #10272d;
  color: #d8e7e0;
  font-size: .65rem;
  line-height: 1.55;
  margin-top: 1rem;
  padding: .8rem;
}
.section--webhooks {
  border-top: 0;
}
.webhook-showcase {
  background: #d7f1dc;
  border: 1px solid #bddfc4;
  border-radius: 24px;
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  grid-template-columns: minmax(0, .85fr) minmax(300px, .8fr);
  padding: clamp(2rem, 5vw, 4.5rem);
}
.webhook-showcase__copy > p:not(.eyebrow) {
  color: #45665b;
  line-height: 1.65;
}
.webhook-showcase__event {
  background: #fffdf8;
  border: 1px solid rgba(20,107,74,.16);
  border-radius: 16px;
  box-shadow: 0 14px 30px rgba(18,58,49,.12);
  overflow: hidden;
}
.webhook-showcase__event-bar {
  align-items: center;
  background: #f2f7f2;
  display: flex;
  gap: .55rem;
  padding: .85rem 1rem;
}
.webhook-showcase__event-bar span {
  background: #54b36e;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(84,179,110,.15);
  height: .5rem;
  width: .5rem;
}
.webhook-showcase__event-bar strong {
  color: #32684a;
  flex: 1;
  font-size: .74rem;
}
.webhook-showcase__event-bar small {
  color: var(--color-muted);
  font-size: .65rem;
}
.webhook-showcase__event .code-sample {
  border-radius: 0;
  font-size: .72rem;
  line-height: 1.55;
}
.webhook-contract {
  background: #102b2b;
  border-radius: 0 0 24px 24px;
  color: #fff;
  display: grid;
  gap: 1px;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
  overflow: hidden;
}
.webhook-contract__intro {
  background: #153735;
  padding: clamp(1.5rem, 4vw, 2.4rem);
}
.webhook-contract__intro .eyebrow {
  color: var(--color-accent);
}
.webhook-contract__intro .eyebrow span {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.webhook-contract__intro h3 {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  letter-spacing: -.04em;
  line-height: 1.12;
  margin: 0 0 .8rem;
}
.webhook-contract__intro > p:not(.eyebrow) {
  color: #bcd1c7;
  font-size: .88rem;
  line-height: 1.65;
  margin: 0;
}
.webhook-contract__steps {
  background: #12302f;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.webhook-contract__steps li {
  border-left: 1px solid rgba(255,255,255,.08);
  padding: 1.5rem 1.25rem;
}
.webhook-contract__steps strong {
  color: var(--color-accent);
  display: block;
  font-size: .7rem;
  letter-spacing: .055em;
  margin-bottom: .5rem;
  text-transform: uppercase;
}
.webhook-contract__steps span {
  color: #c9d9d1;
  display: block;
  font-size: .76rem;
  line-height: 1.55;
}
.webhook-contract__code {
  background: #0c2024;
  grid-column: 1 / -1;
  padding: 1.2rem clamp(1.5rem, 4vw, 2.4rem) clamp(1.5rem, 4vw, 2.4rem);
}
.webhook-contract__code > div {
  align-items: baseline;
  display: flex;
  gap: .7rem;
  justify-content: space-between;
}
.webhook-contract__code > div span {
  color: var(--color-accent);
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.webhook-contract__code > div small {
  color: #90afa3;
  font-size: .7rem;
}
.webhook-contract__code .code-sample {
  background: transparent;
  color: #dce9e5;
  font-size: clamp(.64rem, 1.1vw, .78rem);
  line-height: 1.65;
  margin: .85rem 0 0;
  padding: 0;
}
@media (max-width: 640px) {
  h1 {
    font-size: var(--text-3xl);
    line-height: var(--tw-leading, var(--text-3xl--line-height));
  }
  .site-header__row {
    gap: .65rem;
    padding-block: .75rem;
  }
  .brand {
    font-size: 1rem;
    gap: .35rem;
  }
  .brand__mark {
    display: none;
  }
  .site-nav--desktop, .site-header__sign-in {
    display: none;
  }
  .site-header__actions {
    gap: 0;
    margin-left: auto;
  }
  .site-header__actions .btn {
    font-size: .84rem;
    padding: .7rem 1rem;
  }
  .site-nav-mobile {
    display: block;
    order: 3;
    position: static;
  }
  .site-nav-mobile summary {
    color: var(--color-muted);
    cursor: pointer;
    font-size: .78rem;
    font-weight: 750;
    list-style: none;
    white-space: nowrap;
  }
  .site-nav-mobile summary::-webkit-details-marker {
    display: none;
  }
  .site-nav-mobile summary span {
    color: var(--color-primary);
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    margin-left: .15rem;
    transition: transform .2s ease;
  }
  .site-nav-mobile[open] summary span {
    transform: rotate(45deg);
  }
  .site-nav-mobile nav {
    background: var(--color-warm);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(18,58,49,.13);
    display: grid;
    gap: .1rem;
    padding: .45rem;
    position: absolute;
    right: 1rem;
    top: calc(100% - .2rem);
    width: min(15rem, calc(100vw - 2rem));
    z-index: 4;
  }
  .site-nav-mobile nav a {
    border-radius: 9px;
    color: var(--color-ink);
    font-size: .9rem;
    font-weight: 650;
    padding: .65rem .75rem;
    text-decoration: none;
  }
  .site-nav-mobile nav a:hover {
    background: var(--color-bg-soft);
  }
  .hero {
    padding-top: 3.5rem;
  }
  .hero__grid {
    grid-template-columns: 1fr;
  }
  .hero__ctas {
    align-items: stretch;
    flex-direction: column;
  }
  .hero__ctas .btn {
    text-align: center;
  }
  .feedback-preview {
    margin: .5rem .3rem;
    transform: rotate(1deg);
  }
  .section {
    padding-block: calc(var(--spacing) * 14);
  }
  .section--sage {
    padding: 2rem;
  }
  .section--final-cta {
    margin-inline: 1rem;
  }
  .api-showcase, .platform-showcase {
    grid-template-columns: 1fr;
  }
  .data-route {
    gap: .7rem;
    grid-template-columns: 1fr;
    margin-top: 2.2rem;
  }
  .data-route__path {
    display: none;
  }
  .data-route__node {
    min-height: 0;
  }
  .data-route__node--hub {
    transform: none;
  }
  .data-route__formats {
    margin-top: 1.25rem;
  }
  .platform-showcase__flow {
    grid-template-columns: 1fr 1fr;
  }
  .platform-showcase__flow > i {
    display: none;
  }
  .platform-showcase__flow > div {
    min-height: 6.75rem;
  }
  .platform-showcase__flow .platform-showcase__learn {
    transform: none;
  }
  .developer-hero__grid, .developer-foundations, .auth-showcase, .accounts-showcase, .webhook-showcase, .webhook-contract {
    grid-template-columns: 1fr;
  }
  .developer-hero__request {
    transform: none;
  }
  .developer-features {
    grid-template-columns: 1fr;
  }
  .reference-reads, .endpoint-reference__examples {
    grid-template-columns: 1fr;
  }
  .reference-reads article:last-child {
    grid-column: auto;
  }
  .accounts-steps, .webhook-contract__steps {
    grid-template-columns: 1fr;
  }
  .webhook-contract__steps li {
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.08);
  }
  .webhook-contract__code {
    grid-column: auto;
  }
  .endpoint-reference__item summary, .endpoint-parameters dl > div {
    grid-template-columns: 1fr;
    gap: .45rem;
  }
  .endpoint-reference__item summary {
    align-items: flex-start;
  }
  .endpoint-reference__toggle {
    position: absolute;
    right: 1.2rem;
  }
  .endpoint-reference__item summary {
    position: relative;
    padding-right: 3.5rem;
  }
  .content-hero {
    padding-block: 4rem;
  }
  .content-hero h1, .pricing-hero h1, .platform-page-hero h1 {
    font-size: clamp(2.65rem, 12vw, 3.75rem);
  }
  .content-section__grid {
    gap: 1rem;
    grid-template-columns: 1fr;
  }
  .content-section__ordinal {
    margin-top: 0;
  }
  .content-links--cards {
    grid-template-columns: 1fr;
  }
  .pricing-hero__grid, .platform-page-hero__grid, .platform-product, .platform-setup {
    grid-template-columns: 1fr;
  }
  .pricing-hero__trial, .platform-page-hero__accounts {
    max-width: 22rem;
    transform: rotate(1deg);
  }
  .platform-benefits {
    grid-template-columns: 1fr;
  }
  .platform-product__flow {
    grid-template-columns: 1fr 1fr;
  }
  .platform-product__flow i {
    display: none;
  }
  .platform-setup {
    padding: 1.25rem;
  }
  .setup-showcase, .owner-showcase, .inbox-showcase, .response-showcase, .question-showcase, .comparison-showcase {
    grid-template-columns: 1fr;
  }
  .section--sage {
    padding: 1.5rem;
  }
  .owner-showcase__benefits ul, .question-showcase__prompts, .home-guide-links {
    grid-template-columns: 1fr;
  }
  .question-showcase__intro {
    padding-right: 0;
  }
  .question-showcase__prompt .score-scale {
    gap: .35rem;
  }
  .question-showcase__prompt .score-scale__value {
    font-size: .73rem;
  }
  .comparison-showcase {
    padding: 1.4rem;
  }
  .comparison-table--rich {
    display: block;
    overflow-x: auto;
  }
  .inbox-showcase, .response-showcase, .question-showcase {
    padding: 1.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}
.content-hero__cta {
  margin-top: 1.7rem;
}
.content-hero__cta span, .platform-page-hero__cta span {
  margin-left: .35rem;
}
.platform-page-hero__cta {
  background: var(--color-accent);
  box-shadow: none;
  color: var(--color-deep);
  margin-top: 1.4rem;
}
.platform-page-hero__cta:hover {
  background: #ebffac;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-leading: initial;
      --tw-tracking: initial;
      --tw-border-style: solid;
      --tw-font-weight: initial;
    }
  }
}