*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

/*
! tailwindcss v3.4.18 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: #e5e7eb;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}

.\!visible {
  visibility: visible !important;
}

.visible {
  visibility: visible;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.isolate {
  isolation: isolate;
}

.block {
  display: block;
}

.flex {
  display: flex;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.border {
  border-width: 1px;
}

.uppercase {
  text-transform: uppercase;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.outline {
  outline-style: solid;
}

.ring {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

:root{
  --bg:#FFFFFF;
  --ink:#0A0A0A;
  --muted:#737373;
  --cream:#EDE8E0;
  --line:#E5E5E5;
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
}

*{
  box-sizing:border-box
}

html{
  scroll-behavior:smooth
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,"Helvetica Neue",Arial,system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased
}

a{
  color:inherit
}

button{
  font:inherit
}

.page{
  min-height:100vh;
  background:var(--bg);
  padding-top:var(--safe-area-inset-top)
}

/* NAV */

.nav-wrap{
  position:sticky;
  top:var(--safe-area-inset-top);
  z-index:30;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(8px)
}

.nav{
  max-width:1180px;
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}

.tabbar{
  position:sticky;
  top:calc(var(--safe-area-inset-top) + 64px);
  z-index:25;
  background:#fff;
  border-bottom:1px solid var(--line)
}

.tabbar-inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  gap:4px;
  overflow-x:auto;
  scrollbar-width:none
}

.tabbar-inner::-webkit-scrollbar{
  display:none
}

.tab{
  border:0;
  background:transparent;
  padding:13px 12px 11px;
  font-size:14px;
  font-weight:600;
  color:#737373;
  border-bottom:2px solid transparent;
  cursor:pointer;
  white-space:nowrap
}

.tab:hover{
  color:#0A0A0A
}

.tab.active{
  color:#0A0A0A;
  border-bottom-color:#0A0A0A
}

.tab:focus-visible{
  outline:2px solid #0A0A0A;
  outline-offset:2px
}

.tab-note{
  margin-left:auto;
  font-size:11px;
  color:#A3A3A3;
  white-space:nowrap;
  padding-left:16px
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none
}

.logo-mark{
  width:34px;
  height:34px;
  border:1.8px solid #0A0A0A;
  border-radius:9px;
  display:grid;
  place-items:center;
  position:relative;
  background:#fff;
  flex:none
}

.logo-l{
  font-weight:900;
  font-size:19px;
  line-height:1;
  transform:translate(-2px,1px)
}

.logo-arrow{
  position:absolute;
  right:5px;
  top:3px;
  font-size:11px;
  font-weight:900
}

.logo-text{
  font-size:19px;
  letter-spacing:-.02em
}

.logo-text span{
  font-weight:900
}

.nav-center{
  display:flex;
  gap:28px
}

.nav-center a{
  text-decoration:none;
  font-size:14px;
  color:#262626
}

.nav-center a:hover{
  color:#000;
  text-decoration:underline;
  text-underline-offset:4px
}

.nav-right{
  display:flex;
  align-items:center;
  gap:18px
}

.login{
  text-decoration:none;
  font-size:14px;
  font-weight:600
}

.pill-black,.btn-black{
  background:#0A0A0A;
  color:#fff;
  border-radius:999px;
  padding:10px 18px;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid #0A0A0A;
  cursor:pointer
}

.pill-black:hover,.btn-black:hover{
  background:#222
}

.hamburger{
  display:none;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px;
  cursor:pointer
}

.mobile-menu{
  display:none;
  border-top:1px solid var(--line);
  padding:12px 24px 18px;
  flex-direction:column;
  gap:12px;
  background:#fff
}

.mobile-menu a{
  text-decoration:none;
  font-size:15px;
  font-weight:600
}

/* HERO */

.hero{
  max-width:1180px;
  margin:0 auto;
  padding:24px 24px 12px
}

.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:36px;
  align-items:center
}

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:7px 12px;
  font-size:11px;
  letter-spacing:.14em;
  font-weight:700
}

.eyebrow-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#0A0A0A;
  display:inline-block
}

.hero h1{
  font-size:48px;
  line-height:1.02;
  letter-spacing:-.04em;
  margin:14px 0 12px;
  font-weight:800
}

.h1-underline{
  box-shadow:inset 0 -10px 0 #EDE8E0
}

.hero-sub{
  font-size:17px;
  line-height:1.55;
  color:#525252;
  max-width:480px;
  margin:0
}

.hero-actions{
  display:flex;
  gap:12px;
  margin:16px 0;
  flex-wrap:wrap
}

.btn-white{
  background:#fff;
  color:#0A0A0A;
  border:1px solid #0A0A0A;
  border-radius:999px;
  padding:12px 18px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer
}

.btn-white:hover{
  background:#F5F5F5
}

.proof{
  display:flex;
  gap:12px;
  align-items:center
}

.avatars{
  display:flex
}

.avatars i{
  width:28px;
  height:28px;
  border-radius:50%;
  border:2px solid #fff;
  background:#D9D9D9;
  display:block;
  margin-left:-6px
}

.avatars i:first-child{
  margin-left:0
}

.avatars i:nth-child(2){
  background:#BFBFBF
}

.avatars i:nth-child(3){
  background:#A6A6A6
}

.avatars i:nth-child(4){
  background:#8A8A8A
}

.avatars b{
  width:28px;
  height:28px;
  border-radius:50%;
  background:#0A0A0A;
  color:#fff;
  display:grid;
  place-items:center;
  font-size:11px;
  margin-left:-6px;
  border:2px solid #fff
}

.stars{
  font-size:13px;
  letter-spacing:.08em
}

.stars span{
  color:#737373
}

.proof p{
  margin:2px 0 0;
  font-size:13px;
  color:#737373
}

.mock{
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.10);
  overflow:hidden;
  background:#fff
}

.mock-top{
  padding:20px 20px 14px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start
}

.mock-kicker{
  font-size:10px;
  letter-spacing:.16em;
  color:#737373;
  font-weight:700
}

.mock-top h3{
  margin:6px 0 0;
  font-size:28px;
  letter-spacing:-.03em
}

.mock-top h3 em{
  font-style:normal;
  font-size:12px;
  background:#EDE8E0;
  padding:4px 8px;
  border-radius:999px;
  margin-left:8px;
  vertical-align:middle
}

.live{
  font-size:10px;
  letter-spacing:.14em;
  font-weight:800;
  border:1px solid var(--line);
  padding:6px 9px;
  border-radius:999px;
  display:flex;
  gap:6px;
  align-items:center
}

.live i{
  width:7px;
  height:7px;
  background:#16A34A;
  border-radius:50%;
  display:block
}

.mock-bars{
  padding:0 20px 16px;
  display:grid;
  gap:9px
}

.mock-bars div{
  display:grid;
  grid-template-columns:110px 1fr;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:#737373
}

.mock-bars b{
  height:8px;
  background:#0A0A0A;
  border-radius:99px;
  display:block
}

.mock-leads{
  border-top:1px solid var(--line)
}

.lead-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 20px;
  border-bottom:1px solid #F0F0F0
}

.lead-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  background:#EDE8E0;
  display:grid;
  place-items:center;
  font-size:11px;
  font-weight:800;
  flex:none
}

.lead-who{
  display:flex;
  flex-direction:column;
  flex:1;
  min-width:0
}

.lead-who b{
  font-size:13px
}

.lead-who small{
  font-size:11px;
  color:#737373;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.lead-score{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px
}

.lead-score b{
  font-size:13px
}

.lead-score i{
  width:64px;
  height:5px;
  background:#0A0A0A;
  border-radius:99px;
  display:block
}

.mock-foot{
  padding:13px 20px;
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#737373
}

/* STRIP */

.strip{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:22px 24px;
  text-align:center
}

.strip p{
  font-size:11px;
  letter-spacing:.18em;
  color:#737373;
  margin:0 0 14px;
  font-weight:700
}

.strip-logos{
  display:flex;
  justify-content:center;
  gap:36px;
  flex-wrap:wrap;
  color:#A3A3A3;
  font-weight:900;
  letter-spacing:.08em;
  font-size:17px
}

/* SECTIONS */

.section{
  max-width:1180px;
  margin:0 auto;
  padding:72px 24px
}

.section-head{
  margin-bottom:32px
}

.kicker{
  font-size:11px;
  letter-spacing:.18em;
  color:#737373;
  font-weight:800
}

.section-head h2{
  font-size:40px;
  line-height:1.05;
  letter-spacing:-.03em;
  margin:12px 0 0
}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}

.card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:26px;
  background:#fff
}

.card-dark{
  background:#0A0A0A;
  color:#fff;
  border-color:#0A0A0A
}

.card-icon{
  width:44px;
  height:44px;
  border:1px solid var(--line);
  border-radius:12px;
  display:grid;
  place-items:center;
  margin-bottom:20px
}

.card-dark .card-icon{
  border-color:#333
}

.card h3{
  font-size:20px;
  margin:0 0 10px
}

.card p{
  font-size:14px;
  line-height:1.6;
  color:#737373;
  margin:0 0 22px
}

.card-dark p{
  color:#A3A3A3
}

.card a{
  display:inline-flex;
  align-items:center;
  gap:2px;
  text-decoration:none;
  font-weight:700;
  font-size:14px
}

.how{
  max-width:1180px;
  margin:0 auto;
  padding:18px 24px 72px
}

.steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  border-top:1px solid #0A0A0A
}

.steps>div{
  padding-top:22px
}

.step-num{
  font-family:ui-monospace,monospace;
  font-size:12px;
  letter-spacing:.16em;
  color:#737373
}

.steps h3{
  font-size:22px;
  margin:12px 0 8px
}

.steps p{
  font-size:14px;
  line-height:1.6;
  color:#737373;
  margin:0
}

/* PANELS + SHOWCASE */

.panels{
  max-width:1180px;
  margin:0 auto;
  padding:28px 24px 20px
}

.panel-sub{
  color:#737373;
  line-height:1.6;
  max-width:620px;
  margin:12px 0 0;
  font-size:16px
}

.showcase{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-bottom:44px
}

.demo-frame{
  margin:0;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column
}

.browser-chrome{
  display:flex;
  align-items:center;
  gap:5px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  background:#FAFAFA
}

.browser-chrome i{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#D9D9D9;
  display:block
}

.browser-chrome span{
  font-size:11px;
  color:#737373;
  margin-left:6px;
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.live-badge{
  font-size:9px;
  letter-spacing:.1em;
  background:#0A0A0A;
  color:#fff;
  padding:4px 7px;
  border-radius:999px
}

.demo-body{
  padding:18px;
  min-height:196px
}

.demo-head{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  color:#525252
}

.pulse-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#16A34A;
  animation:pulse 1.4s infinite
}

@keyframes pulse{
  0%{
    box-shadow:0 0 0 0 rgba(22,163,74,.45)
  }

  100%{
    box-shadow:0 0 0 10px rgba(22,163,74,0)
  }
}

.score-big{
  font-size:58px;
  line-height:1;
  letter-spacing:-.05em;
  margin:12px 0 4px
}

.score-big small{
  font-size:18px;
  color:#A3A3A3
}

.score-label{
  font-size:10px;
  letter-spacing:.14em;
  font-weight:800;
  color:#16A34A
}

.anim-bars{
  margin-top:18px;
  display:grid;
  gap:9px
}

.anim-bars div{
  display:grid;
  grid-template-columns:78px 1fr;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:#737373
}

.anim-bars b{
  height:8px;
  border-radius:99px;
  background:#0A0A0A;
  display:block;
  animation:grow 3s ease-in-out infinite
}

.bar-b{
  animation-delay:.3s
}

.bar-c{
  animation-delay:.6s
}

@keyframes grow{
  0%{
    width:12%
  }

  45%{
    width:92%
  }

  70%{
    width:68%
  }

  100%{
    width:12%
  }
}

.pipe-cols{
  display:flex;
  justify-content:space-between;
  font-size:10px;
  letter-spacing:.14em;
  font-weight:800;
  color:#737373
}

.pipe-track{
  display:flex;
  align-items:center;
  gap:8px;
  margin:22px 0 12px
}

.pipe-card{
  border:1px solid #0A0A0A;
  border-radius:10px;
  padding:10px 11px;
  font-size:12px;
  font-weight:700;
  animation:slideCard 3.6s ease-in-out infinite;
  background:#fff
}

.pipe-card.won{
  background:#0A0A0A;
  color:#fff
}

.pipe-arrow{
  font-weight:900
}

@keyframes slideCard{
  0%,20%{
    transform:translateX(0);
    opacity:1
  }

  55%{
    transform:translateX(58px)
  }

  80%,100%{
    transform:translateX(0)
  }
}

.pipe-progress{
  height:6px;
  background:#EDE8E0;
  border-radius:99px;
  overflow:hidden
}

.pipe-progress i{
  display:block;
  height:100%;
  width:50%;
  background:#0A0A0A;
  animation:slideBar 3.6s ease-in-out infinite
}

@keyframes slideBar{
  0%{
    transform:translateX(-100%)
  }

  55%{
    transform:translateX(120%)
  }

  100%{
    transform:translateX(-100%)
  }
}

.pipe-note{
  font-size:12px;
  color:#737373;
  margin:14px 0 0
}

.email-to{
  font-size:12px;
  color:#737373;
  border-bottom:1px solid #F0F0F0;
  padding-bottom:10px
}

.email-box{
  min-height:58px;
  font-size:14px;
  line-height:1.55;
  padding:14px 0
}

.typing-text{
  word-break:break-word
}

.caret{
  display:inline-block;
  width:2px;
  height:15px;
  background:#0A0A0A;
  margin-left:2px;
  vertical-align:-2px;
  animation:blink 1s steps(1) infinite
}

@keyframes blink{
  50%{
    opacity:0
  }
}

.email-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:11px;
  color:#737373
}

.send-btn{
  border:0;
  background:#0A0A0A;
  color:#fff;
  border-radius:999px;
  padding:9px 13px;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  animation:pulseBtn 1.6s infinite;
  white-space:nowrap
}

@keyframes pulseBtn{
  0%,100%{
    transform:scale(1)
  }

  50%{
    transform:scale(1.05)
  }
}

.inline-ok{
  font-size:12px;
  color:#16A34A;
  margin:10px 0 0
}

.demo-frame figcaption{
  border-top:1px solid var(--line);
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:3px
}

.demo-frame figcaption b{
  font-size:14px
}

.demo-frame figcaption span{
  font-size:12px;
  color:#737373
}

.features-head{
  margin-top:8px
}

.docs-layout{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:20px;
  align-items:start
}

.docs-side{
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
  position:sticky;
  top:132px
}

.docs-search{
  display:flex;
  gap:8px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:999px;
  padding:9px 12px
}

.docs-search input{
  border:0;
  outline:0;
  min-width:0;
  flex:1;
  font-size:14px
}

.side-label{
  font-size:10px;
  letter-spacing:.16em;
  color:#737373;
  font-weight:800;
  margin:18px 0 8px
}

.side-link{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  border:0;
  background:transparent;
  text-align:left;
  padding:10px 10px;
  border-radius:10px;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  color:#525252
}

.side-link.active{
  background:#0A0A0A;
  color:#fff
}

.side-note{
  display:flex;
  flex-direction:column;
  gap:3px;
  border-top:1px solid var(--line);
  margin-top:14px;
  padding-top:12px;
  font-size:12px;
  color:#737373
}

.docs-main h3{
  font-size:24px;
  margin:0
}

.docs-intro{
  color:#737373;
  line-height:1.6
}

.doc-block{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:14px
}

.doc-block-head{
  display:flex;
  justify-content:space-between;
  padding:13px 16px;
  background:#FAFAFA;
  border-bottom:1px solid var(--line)
}

.doc-block pre{
  margin:0;
  padding:16px;
  background:#0A0A0A;
  color:#EDE8E0;
  overflow:auto;
  font-size:13px;
  line-height:1.6;
  white-space:pre-wrap
}

.empty-docs{
  border:1px dashed var(--line);
  border-radius:12px;
  padding:20px;
  color:#737373
}

.billing-toggle{
  display:inline-flex;
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px;
  background:#FAFAFA
}

.billing-toggle button{
  border:0;
  background:transparent;
  padding:9px 15px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600
}

.billing-toggle button.on{
  background:#0A0A0A;
  color:#fff
}

.billing-note{
  color:#737373;
  font-size:14px
}

.price-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:18px
}

.price-card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:24px;
  position:relative
}

.price-card.dark{
  background:#0A0A0A;
  color:#fff
}

.price-card>span{
  font-size:11px;
  letter-spacing:.16em;
  font-weight:800
}

.price-card h3{
  font-size:40px;
  margin:12px 0 6px
}

.price-card h3 small{
  font-size:14px
}

.price-card p{
  color:#737373;
  margin:0 0 18px
}

.price-card.dark p{
  color:#A3A3A3
}

.price-card ul{
  list-style:none;
  padding:0;
  margin:0 0 22px;
  display:grid;
  gap:9px;
  font-size:14px
}

.price-card button{
  width:100%;
  border:1px solid #0A0A0A;
  background:#fff;
  border-radius:999px;
  padding:11px;
  cursor:pointer;
  font-weight:700
}

.price-card.dark button{
  background:#fff
}

.popular{
  position:absolute;
  right:16px;
  top:16px;
  background:#E9762B;
  color:#fff;
  border-radius:999px;
  padding:5px 8px;
  font-size:9px!important
}

.customer-quote{
  max-width:900px;
  margin:0 auto 28px
}

.customer-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px
}

.customer-card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px
}

.customer-card p{
  font-size:18px;
  line-height:1.5
}

.customer-card>div{
  display:flex;
  flex-direction:column
}

.customer-card>div span{
  font-size:13px;
  color:#737373
}

.timeline{
  max-width:760px;
  border-left:2px solid #0A0A0A;
  margin-left:8px
}

.timeline-row{
  position:relative;
  padding:0 0 30px 28px
}

.timeline-dot{
  position:absolute;
  left:-8px;
  top:5px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  border:3px solid #0A0A0A
}

.version{
  font-family:ui-monospace,monospace;
  font-size:12px;
  color:#737373
}

.timeline-row h3{
  margin:6px 0
}

.timeline-row p{
  color:#737373;
  line-height:1.6;
  margin:0
}

.template-banner{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 16px;
  margin-bottom:18px;
  background:#FAFAFA
}

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

.template-card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px
}

.template-card.picked{
  border-color:#0A0A0A;
  box-shadow:0 0 0 1px #0A0A0A
}

.template-card h3{
  margin:0
}

.template-card p{
  color:#737373;
  margin:0;
  line-height:1.5
}

.template-card>span{
  font-size:12px;
  color:#737373
}

.template-card button{
  margin-top:auto;
  border:1px solid #0A0A0A;
  background:#fff;
  border-radius:999px;
  padding:9px 14px;
  cursor:pointer;
  font-weight:700
}

@media(max-width:820px){
  .showcase,.price-grid,.template-grid{
    grid-template-columns:1fr
  }

  .docs-layout{
    grid-template-columns:1fr
  }

  .docs-side{
    position:static
  }

  .customer-grid{
    grid-template-columns:1fr
  }

  .tab-note{
    display:none
  }

  .hero h1{
    font-size:32px
  }

  .hero-halftone .hwf-root{
    height:260px !important
  }

  .tabbar{
    top:calc(var(--safe-area-inset-top) + 64px)
  }
}

.metrics{
  max-width:1180px;
  margin:0 auto 72px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(4,1fr)
}

.metrics div{
  padding:30px 24px;
  text-align:center;
  border-right:1px solid var(--line)
}

.metrics div:last-child{
  border-right:0
}

.metrics b{
  display:block;
  font-size:38px;
  letter-spacing:-.04em
}

.metrics span{
  font-size:13px;
  color:#737373
}

.quote{
  max-width:900px;
  margin:0 auto;
  padding:0 24px 72px;
  text-align:center
}

.quote-mark{
  font-size:72px;
  line-height:.4;
  display:block;
  color:#E5E5E5
}

.quote blockquote{
  font-size:32px;
  line-height:1.25;
  letter-spacing:-.025em;
  font-weight:650;
  margin:22px 0
}

.quote-author{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px
}

.quote-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  background:#0A0A0A;
  color:#fff;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:800
}

.quote-author>div{
  display:flex;
  flex-direction:column;
  text-align:left
}

.quote-author>div span{
  font-size:13px;
  color:#737373
}

.quote-stars{
  font-size:12px;
  letter-spacing:.1em
}

/* CTA */

.cta-wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px 72px
}

.cta{
  background:#0A0A0A;
  color:#fff;
  border-radius:22px;
  padding:56px 32px;
  text-align:center
}

.cta h2{
  font-size:44px;
  line-height:1.02;
  letter-spacing:-.035em;
  margin:0
}

.cta p{
  color:#A3A3A3;
  margin:14px 0 26px
}

.cta form{
  display:flex;
  max-width:520px;
  margin:0 auto;
  gap:8px;
  background:#1A1A1A;
  border:1px solid #333;
  border-radius:999px;
  padding:6px
}

.cta input{
  flex:1;
  min-width:0;
  background:transparent;
  border:0;
  outline:0;
  color:#fff;
  padding:10px 14px;
  font-size:15px
}

.cta input::-moz-placeholder{
  color:#737373
}

.cta input::placeholder{
  color:#737373
}

.cta form button{
  background:#fff;
  color:#0A0A0A;
  border:0;
  border-radius:999px;
  padding:11px 18px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  white-space:nowrap
}

.cta small{
  display:block;
  margin-top:16px;
  color:#737373;
  font-size:12px
}

.form-msg{
  margin:14px 0 0!important;
  font-size:14px!important
}

.form-msg.error{
  color:#FCA5A5!important
}

.form-msg.success{
  color:#BBF7D0!important;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px
}

/* FOOTER HINT + WRAPPER */

.footer-hint{
  background:#0A0A0A;
  color:#737373;
  padding:18px 24px 0;
  text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase
}

.footer-hint b{
  color:#EDE8E0;
  font-weight:500
}

.hwf-wrap{
  width:100%
}

.hwf-wrap .hwf-root{
  height:560px
}

/* HERO HALFTONE WORDMARK — full-bleed, no card/box, white page background */

.hero-halftone{
  width:100%;
  max-width:none;
  margin:0;
  padding:0 0 12px;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:#FFFFFF;
  overflow:visible
}

.hero-halftone .hwf-root{
  width:100%;
  height:320px;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:visible
}

.hero-halftone .hwf-top,.hero-halftone .hwf-rule{
  display:none
}

.hero-halftone-hint{
  background:transparent;
  color:#737373;
  padding:18px 24px 0;
  text-align:center;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0;
  border:0
}

.hero-halftone-hint b{
  color:#0A0A0A;
  font-weight:500
}

@media(max-width:820px){
  .nav-center,.nav-right{
    display:none
  }

  .hamburger{
    display:block
  }

  .mobile-menu{
    display:flex
  }

  .hero{
    padding-top:24px
  }

  .hero-grid{
    grid-template-columns:1fr;
    gap:24px
  }

  .hero h1{
    font-size:32px
  }

  .cards,.steps{
    grid-template-columns:1fr
  }

  .metrics{
    grid-template-columns:1fr 1fr
  }

  .metrics div:nth-child(2){
    border-right:0
  }

  .metrics div{
    border-bottom:1px solid var(--line)
  }

  .section-head h2{
    font-size:32px
  }

  .quote blockquote{
    font-size:24px
  }

  .cta{
    padding:40px 20px
  }

  .cta h2{
    font-size:34px
  }

  .cta form{
    flex-direction:column;
    background:transparent;
    border:0;
    padding:0
  }

  .cta input{
    background:#1A1A1A;
    border:1px solid #333;
    border-radius:999px
  }

  .cta form button{
    justify-content:center
  }

  .hwf-wrap .hwf-root{
    height:520px
  }

  .hero-halftone{
    margin:0;
    padding:0 0 28px;
    border:0;
    border-radius:0;
    box-shadow:none;
    overflow:visible
  }

  .hero-halftone .hwf-root{
    height:360px !important;
    overflow:visible
  }
}

@media(max-width:430px){
  .nav{
    padding-left:16px;
    padding-right:16px
  }

  .hero,.section,.how,.cta-wrap{
    padding-left:16px;
    padding-right:16px
  }

  .strip-logos{
    gap:20px
  }

  .mock-foot{
    flex-direction:column;
    gap:4px
  }

  .lead-who small{
    white-space:normal
  }
}

@media(prefers-color-scheme:dark){
  :root{
    --bg:#FFFFFF;
    --ink:#0A0A0A
  }
}

@tailwind base;@tailwind components;@tailwind utilities;:root{--bg:#fff;--ink:#0a0a0a;--muted:#737373;--cream:#ede8e0;--line:#e5e5e5;--safe-area-inset-top:env(safe-area-inset-top,0px)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;margin:0;font-family:Inter,Helvetica Neue,Arial,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,sans-serif}a{color:inherit}button{font:inherit}.page{background:var(--bg);padding-top:var(--safe-area-inset-top);min-height:100vh}.nav-wrap{position:sticky;top:var(--safe-area-inset-top);z-index:30;border-bottom:1px solid var(--line);backdrop-filter:blur(8px);background:#fffffff5}.nav{display:flex;justify-content:space-between;align-items: center;gap:16px;max-width:1180px;margin:0 auto;padding:14px 24px}.tabbar{position:sticky;top:calc(var(--safe-area-inset-top) + 64px);z-index:25;border-bottom:1px solid var(--line);background:#fff}.tabbar-inner{display:flex;overflow-x:auto;scrollbar-width:none;align-items: center;gap:4px;max-width:1180px;margin:0 auto;padding:0 24px}.tabbar-inner::-webkit-scrollbar{display:none}.tab{color:#737373;cursor:pointer;white-space:nowrap;background:0 0;border:0;border-bottom:2px solid #0000;padding:13px 12px 11px;font-size:14px;font-weight:600}.tab:hover{color:#0a0a0a}.tab.active{color:#0a0a0a;border-bottom-color:#0a0a0a}.tab:focus-visible{outline:2px solid #0a0a0a;outline-offset:2px}.tab-note{color:#a3a3a3;white-space:nowrap;margin-left:auto;padding-left:16px;font-size:11px}.logo{display:flex;text-decoration:none;align-items: center;gap:10px}.logo-mark{display:grid;position:relative;background:#fff;border:1.8px solid #0a0a0a;border-radius:9px;flex:none;place-items: center;width:34px;height:34px}.logo-l{font-size:19px;font-weight:900;line-height:1;transform:translate(-2px,1px)}.logo-arrow{position:absolute;font-size:11px;font-weight:900;top:3px;right:5px}.logo-text{letter-spacing:-.02em;font-size:19px}.logo-text span{font-weight:900}.nav-center{display:flex;gap:28px}.nav-center a{text-decoration:none;color:#262626;font-size:14px}.nav-center a:hover{color:#000;text-decoration:underline;text-underline-offset:4px}.nav-right{display:flex;align-items: center;gap:18px}.login{text-decoration:none;font-size:14px;font-weight:600}.pill-black,.btn-black{color:#fff;text-decoration:none;display:inline-flex;cursor:pointer;background:#0a0a0a;border:1px solid #0a0a0a;border-radius:999px;align-items: center;gap:6px;padding:10px 18px;font-size:14px;font-weight:600}.pill-black:hover,.btn-black:hover{background:#222}.hamburger{display:none;border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:8px;padding:8px}.mobile-menu{display:none;border-top:1px solid var(--line);background:#fff;flex-direction:column;gap:12px;padding:12px 24px 18px}.mobile-menu a{text-decoration:none;font-size:15px;font-weight:600}.hero{max-width:1180px;margin:0 auto;padding:24px 24px 12px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items: center;gap:36px}.eyebrow{display:inline-flex;border:1px solid var(--line);letter-spacing:.14em;border-radius:999px;align-items: center;gap:8px;padding:7px 12px;font-size:11px;font-weight:700}.eyebrow-dot{display:inline-block;background:#0a0a0a;border-radius:50%;width:7px;height:7px}.hero h1{letter-spacing:-.04em;margin:14px 0 12px;font-size:48px;font-weight:800;line-height:1.02}.h1-underline{box-shadow:inset 0 -10px #ede8e0}.hero-sub{color:#525252;max-width:480px;margin:0;font-size:17px;line-height:1.55}.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}.btn-white{color:#0a0a0a;display:inline-flex;cursor:pointer;background:#fff;border:1px solid #0a0a0a;border-radius:999px;align-items: center;gap:8px;padding:12px 18px;font-weight:600}.btn-white:hover{background:#f5f5f5}.proof{display:flex;align-items: center;gap:12px}.avatars{display:flex}.avatars i{display:block;background:#d9d9d9;border:2px solid #fff;border-radius:50%;width:28px;height:28px;margin-left:-6px}.avatars i:first-child{margin-left:0}.avatars i:nth-child(2){background:#bfbfbf}.avatars i:nth-child(3){background:#a6a6a6}.avatars i:nth-child(4){background:#8a8a8a}.avatars b{color:#fff;display:grid;background:#0a0a0a;border:2px solid #fff;border-radius:50%;place-items: center;width:28px;height:28px;margin-left:-6px;font-size:11px}.stars{letter-spacing:.08em;font-size:13px}.stars span{color:#737373}.proof p{color:#737373;margin:2px 0 0;font-size:13px}.mock{border:1px solid var(--line);overflow:hidden;background:#fff;border-radius:18px;box-shadow:0 24px 60px #0000001a}.mock-top{display:flex;justify-content:space-between;align-items: flex-start;padding:20px 20px 14px}.mock-kicker{letter-spacing:.16em;color:#737373;font-size:10px;font-weight:700}.mock-top h3{letter-spacing:-.03em;margin:6px 0 0;font-size:28px}.mock-top h3 em{vertical-align:middle;background:#ede8e0;border-radius:999px;margin-left:8px;padding:4px 8px;font-size:12px;font-style:normal}.live{letter-spacing:.14em;border:1px solid var(--line);display:flex;border-radius:999px;align-items: center;gap:6px;padding:6px 9px;font-size:10px;font-weight:800}.live i{display:block;background:#16a34a;border-radius:50%;width:7px;height:7px}.mock-bars{display:grid;gap:9px;padding:0 20px 16px}.mock-bars div{display:grid;grid-template-columns:110px 1fr;color:#737373;align-items: center;gap:10px;font-size:12px}.mock-bars b{display:block;background:#0a0a0a;border-radius:99px;height:8px}.mock-leads{border-top:1px solid var(--line)}.lead-row{display:flex;border-bottom:1px solid #f0f0f0;align-items: center;gap:12px;padding:13px 20px}.lead-avatar{display:grid;background:#ede8e0;border-radius:50%;flex:none;place-items: center;width:34px;height:34px;font-size:11px;font-weight:800}.lead-who{display:flex;flex-direction:column;flex:1;min-width:0}.lead-who b{font-size:13px}.lead-who small{color:#737373;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}.lead-score{display:flex;flex-direction:column;align-items: flex-end;gap:4px}.lead-score b{font-size:13px}.lead-score i{display:block;background:#0a0a0a;border-radius:99px;width:64px;height:5px}.mock-foot{display:flex;color:#737373;justify-content:space-between;padding:13px 20px;font-size:12px}.strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center;padding:22px 24px}.strip p{letter-spacing:.18em;color:#737373;margin:0 0 14px;font-size:11px;font-weight:700}.strip-logos{display:flex;color:#a3a3a3;letter-spacing:.08em;flex-wrap:wrap;justify-content:center;gap:36px;font-size:17px;font-weight:900}.section{max-width:1180px;margin:0 auto;padding:72px 24px}.section-head{margin-bottom:32px}.kicker{letter-spacing:.18em;color:#737373;font-size:11px;font-weight:800}.section-head h2{letter-spacing:-.03em;margin:12px 0 0;font-size:40px;line-height:1.05}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{border:1px solid var(--line);background:#fff;border-radius:16px;padding:26px}.card-dark{color:#fff;background:#0a0a0a;border-color:#0a0a0a}.card-icon{border:1px solid var(--line);display:grid;border-radius:12px;place-items: center;width:44px;height:44px;margin-bottom:20px}.card-dark .card-icon{border-color:#333}.card h3{margin:0 0 10px;font-size:20px}.card p{color:#737373;margin:0 0 22px;font-size:14px;line-height:1.6}.card-dark p{color:#a3a3a3}.card a{display:inline-flex;text-decoration:none;align-items: center;gap:2px;font-size:14px;font-weight:700}.how{max-width:1180px;margin:0 auto;padding:18px 24px 72px}.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #0a0a0a;gap:16px}.steps>div{padding-top:22px}.step-num{letter-spacing:.16em;color:#737373;font-family:ui-monospace,monospace;font-size:12px}.steps h3{margin:12px 0 8px;font-size:22px}.steps p{color:#737373;margin:0;font-size:14px;line-height:1.6}.panels{max-width:1180px;margin:0 auto;padding:28px 24px 20px}.panel-sub{color:#737373;max-width:620px;margin:12px 0 0;font-size:16px;line-height:1.6}.showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:44px}.demo-frame{border:1px solid var(--line);overflow:hidden;display:flex;background:#fff;border-radius:16px;flex-direction:column;margin:0;box-shadow:0 12px 30px #0000000f}.browser-chrome{display:flex;border-bottom:1px solid var(--line);background:#fafafa;align-items: center;gap:5px;padding:10px 12px}.browser-chrome i{display:block;background:#d9d9d9;border-radius:50%;width:9px;height:9px}.browser-chrome span{color:#737373;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;margin-left:6px;font-size:11px}.live-badge{letter-spacing:.1em;color:#fff;background:#0a0a0a;border-radius:999px;padding:4px 7px;font-size:9px}.demo-body{min-height:196px;padding:18px}.demo-head{display:flex;color:#525252;justify-content:space-between;font-size:12px}.pulse-dot{animation:pulse 1.4s infinite;background:#16a34a;border-radius:50%;width:10px;height:10px}@keyframes pulse{0%{box-shadow:0 0 #16a34a73}to{box-shadow:0 0 0 10px #16a34a00}}.score-big{letter-spacing:-.05em;margin:12px 0 4px;font-size:58px;line-height:1}.score-big small{color:#a3a3a3;font-size:18px}.score-label{letter-spacing:.14em;color:#16a34a;font-size:10px;font-weight:800}.anim-bars{display:grid;gap:9px;margin-top:18px}.anim-bars div{display:grid;grid-template-columns:78px 1fr;color:#737373;align-items: center;gap:8px;font-size:11px}.anim-bars b{display:block;animation:grow 3s ease-in-out infinite;background:#0a0a0a;border-radius:99px;height:8px}.bar-b{animation-delay:.3s}.bar-c{animation-delay:.6s}@keyframes grow{0%{width:12%}45%{width:92%}70%{width:68%}to{width:12%}}.pipe-cols{display:flex;letter-spacing:.14em;color:#737373;justify-content:space-between;font-size:10px;font-weight:800}.pipe-track{display:flex;align-items: center;gap:8px;margin:22px 0 12px}.pipe-card{animation:slideCard 3.6s ease-in-out infinite;background:#fff;border:1px solid #0a0a0a;border-radius:10px;padding:10px 11px;font-size:12px;font-weight:700}.pipe-card.won{color:#fff;background:#0a0a0a}.pipe-arrow{font-weight:900}@keyframes slideCard{0%,20%{transform:translate(0);opacity:1}55%{transform:translate(58px)}80%,to{transform:translate(0)}}.pipe-progress{overflow:hidden;background:#ede8e0;border-radius:99px;height:6px}.pipe-progress i{display:block;animation:slideBar 3.6s ease-in-out infinite;background:#0a0a0a;width:50%;height:100%}@keyframes slideBar{0%{transform:translate(-100%)}55%{transform:translate(120%)}to{transform:translate(-100%)}}.pipe-note{color:#737373;margin:14px 0 0;font-size:12px}.email-to{color:#737373;border-bottom:1px solid #f0f0f0;padding-bottom:10px;font-size:12px}.email-box{min-height:58px;padding:14px 0;font-size:14px;line-height:1.55}.typing-text{word-break:break-word}.caret{display:inline-block;vertical-align:-2px;animation:blink 1s steps(1)infinite;background:#0a0a0a;width:2px;height:15px;margin-left:2px}@keyframes blink{50%{opacity:0}}.email-foot{display:flex;color:#737373;justify-content:space-between;align-items: center;gap:8px;font-size:11px}.send-btn{color:#fff;cursor:pointer;animation:pulseBtn 1.6s infinite;white-space:nowrap;background:#0a0a0a;border:0;border-radius:999px;padding:9px 13px;font-size:12px;font-weight:700}@keyframes pulseBtn{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.inline-ok{color:#16a34a;margin:10px 0 0;font-size:12px}.demo-frame figcaption{border-top:1px solid var(--line);display:flex;flex-direction:column;gap:3px;padding:14px 16px}.demo-frame figcaption b{font-size:14px}.demo-frame figcaption span{color:#737373;font-size:12px}.features-head{margin-top:8px}.docs-layout{display:grid;grid-template-columns:240px 1fr;align-items: start;gap:20px}.docs-side{border:1px solid var(--line);position:sticky;border-radius:16px;padding:16px;top:132px}.docs-search{display:flex;border:1px solid var(--line);border-radius:999px;align-items: center;gap:8px;padding:9px 12px}.docs-search input{outline:0;border:0;flex:1;min-width:0;font-size:14px}.side-label{letter-spacing:.16em;color:#737373;margin:18px 0 8px;font-size:10px;font-weight:800}.side-link{display:flex;text-align:left;cursor:pointer;color:#525252;background:0 0;border:0;border-radius:10px;align-items: center;gap:9px;width:100%;padding:10px;font-size:14px;font-weight:600}.side-link.active{color:#fff;background:#0a0a0a}.side-note{display:flex;border-top:1px solid var(--line);color:#737373;flex-direction:column;gap:3px;margin-top:14px;padding-top:12px;font-size:12px}.docs-main h3{margin:0;font-size:24px}.docs-intro{color:#737373;line-height:1.6}.doc-block{border:1px solid var(--line);overflow:hidden;border-radius:14px;margin-bottom:14px}.doc-block-head{display:flex;border-bottom:1px solid var(--line);background:#fafafa;justify-content:space-between;padding:13px 16px}.doc-block pre{color:#ede8e0;overflow:auto;white-space:pre-wrap;background:#0a0a0a;margin:0;padding:16px;font-size:13px;line-height:1.6}.empty-docs{border:1px dashed var(--line);color:#737373;border-radius:12px;padding:20px}.billing-toggle{display:inline-flex;border:1px solid var(--line);background:#fafafa;border-radius:999px;padding:4px}.billing-toggle button{cursor:pointer;background:0 0;border:0;border-radius:999px;padding:9px 15px;font-weight:600}.billing-toggle button.on{color:#fff;background:#0a0a0a}.billing-note{color:#737373;font-size:14px}.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}.price-card{border:1px solid var(--line);position:relative;border-radius:16px;padding:24px}.price-card.dark{color:#fff;background:#0a0a0a}.price-card>span{letter-spacing:.16em;font-size:11px;font-weight:800}.price-card h3{margin:12px 0 6px;font-size:40px}.price-card h3 small{font-size:14px}.price-card p{color:#737373;margin:0 0 18px}.price-card.dark p{color:#a3a3a3}.price-card ul{list-style:none;display:grid;gap:9px;margin:0 0 22px;padding:0;font-size:14px}.price-card button{cursor:pointer;background:#fff;border:1px solid #0a0a0a;border-radius:999px;width:100%;padding:11px;font-weight:700}.price-card.dark button{background:#fff}.popular{position:absolute;color:#fff;background:#e9762b;border-radius:999px;padding:5px 8px;top:16px;right:16px;font-size:9px!important}.customer-quote{max-width:900px;margin:0 auto 28px}.customer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.customer-card{border:1px solid var(--line);border-radius:16px;padding:22px}.customer-card p{font-size:18px;line-height:1.5}.customer-card>div{display:flex;flex-direction:column}.customer-card>div span{color:#737373;font-size:13px}.timeline{border-left:2px solid #0a0a0a;max-width:760px;margin-left:8px}.timeline-row{position:relative;padding:0 0 30px 28px}.timeline-dot{position:absolute;background:#fff;border:3px solid #0a0a0a;border-radius:50%;width:14px;height:14px;top:5px;left:-8px}.version{color:#737373;font-family:ui-monospace,monospace;font-size:12px}.timeline-row h3{margin:6px 0}.timeline-row p{color:#737373;margin:0;line-height:1.6}.template-banner{display:flex;border:1px solid var(--line);background:#fafafa;border-radius:12px;align-items: center;gap:10px;margin-bottom:18px;padding:14px 16px}.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.template-card{border:1px solid var(--line);display:flex;border-radius:16px;flex-direction:column;align-items: flex-start;gap:8px;padding:22px}.template-card.picked{border-color:#0a0a0a;box-shadow:0 0 0 1px #0a0a0a}.template-card h3{margin:0}.template-card p{color:#737373;margin:0;line-height:1.5}.template-card>span{color:#737373;font-size:12px}.template-card button{cursor:pointer;background:#fff;border:1px solid #0a0a0a;border-radius:999px;margin-top:auto;padding:9px 14px;font-weight:700}@media (max-width:820px){.showcase,.price-grid,.template-grid,.docs-layout{grid-template-columns:1fr}.docs-side{position:static}.customer-grid{grid-template-columns:1fr}.tab-note{display:none}.hero h1{font-size:32px}.hero-halftone .hwf-root{height:260px!important}.tabbar{top:calc(var(--safe-area-inset-top) + 64px)}}.metrics{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr);max-width:1180px;margin:0 auto 72px}.metrics div{text-align:center;border-right:1px solid var(--line);padding:30px 24px}.metrics div:last-child{border-right:0}.metrics b{display:block;letter-spacing:-.04em;font-size:38px}.metrics span{color:#737373;font-size:13px}.quote{text-align:center;max-width:900px;margin:0 auto;padding:0 24px 72px}.quote-mark{display:block;color:#e5e5e5;font-size:72px;line-height:.4}.quote blockquote{letter-spacing:-.025em;margin:22px 0;font-size:32px;font-weight:650;line-height:1.25}.quote-author{display:flex;justify-content:center;align-items: center;gap:12px}.quote-avatar{color:#fff;display:grid;background:#0a0a0a;border-radius:50%;place-items: center;width:40px;height:40px;font-size:12px;font-weight:800}.quote-author>div{display:flex;text-align:left;flex-direction:column}.quote-author>div span{color:#737373;font-size:13px}.quote-stars{letter-spacing:.1em;font-size:12px}.cta-wrap{max-width:1180px;margin:0 auto;padding:0 24px 72px}.cta{color:#fff;text-align:center;background:#0a0a0a;border-radius:22px;padding:56px 32px}.cta h2{letter-spacing:-.035em;margin:0;font-size:44px;line-height:1.02}.cta p{color:#a3a3a3;margin:14px 0 26px}.cta form{display:flex;background:#1a1a1a;border:1px solid #333;border-radius:999px;gap:8px;max-width:520px;margin:0 auto;padding:6px}.cta input{outline:0;color:#fff;background:0 0;border:0;flex:1;min-width:0;padding:10px 14px;font-size:15px}.cta input::placeholder{color:#737373}.cta form button{color:#0a0a0a;display:flex;cursor:pointer;white-space:nowrap;background:#fff;border:0;border-radius:999px;align-items: center;gap:6px;padding:11px 18px;font-weight:700}.cta small{display:block;color:#737373;margin-top:16px;font-size:12px}.form-msg{margin:14px 0 0!important;font-size:14px!important}.form-msg.error{color:#fca5a5!important}.form-msg.success{display:flex;justify-content:center;align-items: center;gap:6px;color:#bbf7d0!important}.footer-hint{color:#737373;text-align:center;letter-spacing:.14em;text-transform:uppercase;background:#0a0a0a;padding:18px 24px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.footer-hint b{color:#ede8e0;font-weight:500}.hwf-wrap{width:100%}.hwf-wrap .hwf-root{height:560px}.hero-halftone{box-shadow:none;overflow:visible;background:#fff;border:0;border-radius:0;width:100%;max-width:none;margin:0;padding:0 0 12px}.hero-halftone .hwf-root{box-shadow:none;overflow:visible;border:0;border-radius:0;width:100%;height:320px}.hero-halftone .hwf-top,.hero-halftone .hwf-rule{display:none}.hero-halftone-hint{color:#737373;text-align:center;letter-spacing:.14em;text-transform:uppercase;background:0 0;border:0;margin:0;padding:18px 24px 0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px}.hero-halftone-hint b{color:#0a0a0a;font-weight:500}@media (max-width:820px){.nav-center,.nav-right{display:none}.hamburger{display:block}.mobile-menu{display:flex}.hero{padding-top:24px}.hero-grid{grid-template-columns:1fr;gap:24px}.hero h1{font-size:32px}.cards,.steps{grid-template-columns:1fr}.metrics{grid-template-columns:1fr 1fr}.metrics div:nth-child(2){border-right:0}.metrics div{border-bottom:1px solid var(--line)}.section-head h2{font-size:32px}.quote blockquote{font-size:24px}.cta{padding:40px 20px}.cta h2{font-size:34px}.cta form{background:0 0;border:0;flex-direction:column;padding:0}.cta input{background:#1a1a1a;border:1px solid #333;border-radius:999px}.cta form button{justify-content:center}.hwf-wrap .hwf-root{height:520px}.hero-halftone{box-shadow:none;overflow:visible;border:0;border-radius:0;margin:0;padding:0 0 28px}.hero-halftone .hwf-root{overflow:visible;height:360px!important}}@media (max-width:430px){.nav,.hero,.section,.how,.cta-wrap{padding-left:16px;padding-right:16px}.strip-logos{gap:20px}.mock-foot{flex-direction:column;gap:4px}.lead-who small{white-space:normal}}@media (prefers-color-scheme:dark){:root{--bg:#fff;--ink:#0a0a0a}}
/* LeadMASTER integration: real brand, accurate status and accessible controls. */
.brand-image{display:block;width:164px;height:auto}
[hidden]{display:none!important}
.skip-link{position:absolute;left:8px;top:-100px;z-index:100;background:#fff;color:#000;padding:12px}
.skip-link:focus{top:8px}
.btn-white{text-decoration:none}
.hero-actions a{min-height:48px;justify-content:center}
.status-note{font-size:13px;color:#666;line-height:1.5;margin-top:12px}
.status-tag{font-size:10px;letter-spacing:.1em;font-weight:700;color:#6b625b;text-transform:uppercase}
.status-list .lead-row{min-height:62px}
.mock-intro{padding:0 20px 18px;color:#666;font-size:13px;line-height:1.6}
.strip-logos{font-size:14px;letter-spacing:.04em}
.hwf-root{position:relative;width:100%;overflow:hidden;isolation:isolate;background:var(--hwf-bg);color:var(--hwf-ink)}
.hwf-root canvas{position:absolute;inset:0;width:100%;height:100%;display:block;max-width:none}
.hwf-top{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));gap:24px;padding:clamp(22px,3.4vw,40px) clamp(20px,3.4vw,44px) 0;font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.75}
.hwf-brand strong{display:block;font-weight:500}.hwf-brand span{opacity:.65}.hwf-col h3{margin:0;font:inherit;opacity:.65}.hwf-col ul{list-style:none;margin:0;padding:0}.hwf-col a,.hwf-up{color:inherit;text-decoration:none}.hwf-col a:hover,.hwf-up:hover{text-decoration:underline}.hwf-rule{position:relative;z-index:1;display:flex;justify-content:flex-end;margin:30px clamp(20px,3.4vw,44px) 0;padding-top:12px;border-top:1px solid #ffffff30;font:11px ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase}
.hwf-col a:focus-visible,.hwf-up:focus-visible,.nav a:focus-visible,.hero a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.hwf-top img{width:160px;filter:invert(1);margin-bottom:14px}.cta-link{display:inline-flex;align-items:center;justify-content:center;min-height:46px;border-radius:999px;background:#fff;color:#111;font-weight:700;text-decoration:none;padding:11px 22px}
@media(max-width:720px){.hwf-top{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}.hwf-brand{grid-column:1 / -1}.hwf-wrap .hwf-root{height:560px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

.mock-top h3{line-height:1.15}.hamburger svg{display:block;margin:auto}

.mock-foot a{color:inherit;text-decoration:none}.mock-foot a:hover{text-decoration:underline}.panels{scroll-margin-top:130px}

/* Integrated documentation reference */
.doc-anchor{display:block;position:relative;top:-120px;visibility:hidden}
.docs-reference{margin:54px 0 0;padding-top:28px;border-top:1px solid #dedbd5}
.doc-reference-section{scroll-margin-top:118px;padding:38px 0;border-bottom:1px solid #e5e2dc;max-width:980px}
.doc-reference-section h3{font-size:clamp(24px,3vw,34px);letter-spacing:-.035em;line-height:1.15;margin:12px 0 16px}
.doc-reference-section p,.doc-reference-section li{font-size:14px;line-height:1.8;color:#555}
.doc-reference-section ul,.doc-reference-section ol{padding-left:22px}
.doc-reference-section li{margin:5px 0}
.doc-reference-section code{font-size:.92em;background:#f0efec;padding:2px 5px;border-radius:4px;color:#222;overflow-wrap:anywhere}
.doc-reference-section pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#101010;color:#f5f3ef;padding:18px;border-radius:12px;overflow-x:auto}
.doc-reference-section pre code{background:transparent;color:inherit;padding:0}
.doc-status-grid,.doc-architecture{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0}
.doc-status-grid article,.doc-architecture div{border:1px solid #e2dfd9;border-radius:12px;padding:18px;background:#fff}
.doc-status-grid b,.doc-architecture b{display:block;font-size:14px;margin-bottom:8px}
.doc-status-grid ul{padding-left:18px;margin:8px 0}
.doc-architecture{grid-template-columns:repeat(2,minmax(0,1fr))}
.doc-architecture span{display:block;font-size:13px;line-height:1.65;color:#666}
.doc-note{border-left:3px solid #c77a31;padding:10px 14px;background:#f7f4ef}
@media(max-width:720px){.doc-status-grid,.doc-architecture{grid-template-columns:1fr}.doc-reference-section{padding:28px 0}.docs-reference{margin-top:34px}}


/* HERO CAMPAIGN WORKFLOW PREVIEW */
.campaign-demo{align-self:start}
.campaign-demo-head{padding-bottom:12px}
.campaign-demo-head h3{font-size:clamp(23px,2.5vw,29px)}
.campaign-preview-badge{display:inline-flex;align-items:center;gap:7px;border:1px solid #d9e5dc;border-radius:999px;padding:7px 9px;color:#315b40;font-size:9px;font-weight:800;letter-spacing:.08em;white-space:nowrap}
.campaign-preview-badge i,.campaign-cycle-dot{width:7px;height:7px;border-radius:50%;background:#4b9a67;display:inline-block;animation:campaign-pulse 1.5s ease-in-out infinite}
.campaign-demo-content{padding:0 20px 15px}
.campaign-demo-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 12px;color:#777;font-size:9px;font-weight:800;letter-spacing:.12em}
.sample-label{border-radius:4px;background:#f3f1ed;padding:5px 7px;color:#777;font-size:8px;letter-spacing:.08em}
.campaign-audience{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #e9e7e3;border-radius:10px;background:#fcfbf9}
.campaign-icon{width:32px;height:32px;display:grid;place-items:center;border-radius:9px;background:#eeeae3;color:#24211d;font-size:20px}
.campaign-audience-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:3px}
.campaign-audience-copy b{font-size:12px}
.campaign-audience-copy small,.campaign-count small{font-size:10px;color:#85817b}
.campaign-count{font-size:15px;font-weight:800;text-align:right;white-space:nowrap}
.campaign-count small{display:block;font-weight:500}
.campaign-email{margin-top:10px;border:1px solid #e9e7e3;border-radius:10px;padding:12px 13px;background:#fff}
.campaign-email-top{display:flex;align-items:center;gap:7px;color:#777;font-size:9px;font-weight:800;letter-spacing:.1em}
.campaign-mail-icon{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:#f1eee9;color:#333;font-size:12px}
.campaign-draft{margin-left:auto;padding:4px 6px;border-radius:4px;background:#f4f1e9;color:#796b4c;font-size:8px}
.campaign-subject{display:block;margin-top:10px;font-size:14px;letter-spacing:-.02em}
.campaign-email p{margin:5px 0 10px;color:#777;font-size:11px;line-height:1.5}
.campaign-email-cta{display:flex;justify-content:space-between;align-items:center;border-radius:6px;background:#111;color:#fff;padding:8px 10px;font-size:10px;font-weight:700}
.campaign-flow{display:flex;align-items:center;gap:5px;margin:15px 0 9px}
.campaign-flow-step{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;color:#aaa;opacity:.55;white-space:nowrap}
.campaign-flow-step span{display:grid;place-items:center;width:22px;height:22px;border:1px solid #ddd;border-radius:50%;font-size:8px;font-weight:800}
.campaign-flow-step b{font-size:9px;font-weight:700}
.campaign-flow-line{height:1px;flex:1;background:#e7e4df;min-width:5px}
.campaign-progress{height:4px;border-radius:10px;background:#efede9;overflow:hidden}
.campaign-progress span{display:block;width:100%;height:100%;background:#333;transform:scaleX(0);transform-origin:left;animation:campaign-progress 8s ease-in-out infinite}
.campaign-demo-foot{display:flex;align-items:center;gap:7px;min-height:27px;margin-top:6px;color:#777;font-size:10px}
.campaign-cycle-label-1{display:inline}
.campaign-demo .step-audience{animation:campaign-step-1 8s infinite}
.campaign-demo .step-review{animation:campaign-step-2 8s infinite}
.campaign-demo .step-queue{animation:campaign-step-3 8s infinite}
.campaign-demo .step-send{animation:campaign-step-4 8s infinite}
.campaign-cycle-label{display:none}
@keyframes campaign-pulse{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
@keyframes campaign-progress{0%,8%{transform:scaleX(0)}24%{transform:scaleX(.25)}48%{transform:scaleX(.5)}72%{transform:scaleX(.76)}92%,100%{transform:scaleX(1)}}
@keyframes campaign-step-1{0%,22%{opacity:1;color:#222}23%,100%{opacity:.55;color:#aaa}}
@keyframes campaign-step-2{0%,22%{opacity:.55;color:#aaa}23%,46%{opacity:1;color:#222}47%,100%{opacity:.55;color:#aaa}}
@keyframes campaign-step-3{0%,46%{opacity:.55;color:#aaa}47%,70%{opacity:1;color:#222}71%,100%{opacity:.55;color:#aaa}}
@keyframes campaign-step-4{0%,70%{opacity:.55;color:#aaa}71%,100%{opacity:1;color:#222}}
@media(prefers-reduced-motion:reduce){.campaign-preview-badge i,.campaign-cycle-dot,.campaign-progress span,.campaign-flow-step,.campaign-progress span{transform:scaleX(1)}.campaign-flow-step{opacity:1!important;color:#333!important}}
@media(max-width:600px){.campaign-demo-content{padding-right:14px;padding-left:14px}.campaign-demo-head{padding-right:14px;padding-left:14px}.campaign-preview-badge{font-size:8px;padding:6px 7px}.campaign-flow{gap:3px}.campaign-flow-step b{font-size:8px}}

/* MOBILE HERO SPACING — keep the LeadMASTER wordmark close to the first view. */
@media(max-width:820px){
  .hero{padding-top:14px;padding-bottom:6px}
  .hero-grid{gap:14px}
  .hero-halftone{padding-bottom:8px!important}
  .hero-halftone .hwf-root{height:220px!important}
}
@media(max-width:430px){
  .hero{padding-top:10px;padding-bottom:4px}
  .hero-grid{gap:10px}
  .hero-halftone{padding-bottom:4px!important}
  .hero-halftone .hwf-root{height:190px!important}
}