:root {
  --ink: #071521;
  --ink-2: #0d2332;
  --ink-3: #153343;
  --paper: #f4f4ed;
  --white: #fffef8;
  --muted: #6c7478;
  --line: #dfe2dc;
  --lime: #dcff68;
  --lime-strong: #c9f23f;
  --blue: #2869f4;
  --blue-soft: #dce7ff;
  --coral: #ff806f;
  --coral-soft: #ffe3dc;
  --violet: #b095ff;
  --shadow: 0 24px 80px rgba(4, 17, 28, 0.14);
  --radius: 22px;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

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

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.88);
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 11px 15px;
  color: white;
  background: var(--blue);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  transform: translateY(-180%);
  transition: transform 140ms ease;
}

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

.landing-page {
  overflow: hidden;
  background: var(--paper);
}

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  min-height: 84px;
  padding: 0 4vw;
  color: white;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  font-size: 19px;
  font-weight: 760;
  letter-spacing: -0.03em;
}

.brand--light {
  color: white;
}

.brand--dark {
  color: var(--ink);
}

.brand-mark {
  display: grid;
  grid-template-columns: repeat(2, 8px);
  gap: 3px;
  transform: rotate(-8deg);
}

.brand-mark i {
  width: 8px;
  height: 8px;
  background: var(--lime);
  border-radius: 3px;
}

.brand-mark i:nth-child(2) { background: var(--coral); }
.brand-mark i:nth-child(3) { background: var(--blue); }
.brand-mark i:nth-child(4) { background: var(--violet); }
.brand-mark--small { grid-template-columns: repeat(2, 5px); gap: 2px; }
.brand-mark--small i { width: 5px; height: 5px; border-radius: 2px; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.74);
}

.site-nav a,
.site-footer a {
  transition: color 160ms ease;
}

.site-nav a:hover,
.site-footer a:hover {
  color: var(--lime);
}

.header-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 51px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button--small { min-height: 42px; padding: 0 18px; }
.button--large { min-height: 58px; padding: 0 28px; font-size: 15px; }
.button--compact { min-height: 42px; padding: 0 17px; }
.button--lime { background: var(--lime); color: var(--ink); box-shadow: 0 12px 30px rgba(220, 255, 104, 0.18); }
.button--lime:hover { background: #e8ff94; box-shadow: 0 15px 40px rgba(220, 255, 104, 0.28); }
.button--blue { background: var(--blue); color: white; }
.button--ghost { background: rgba(255, 255, 255, 0.09); color: white; border-color: rgba(255, 255, 255, 0.05); }
.button--outline-light { color: white; background: transparent; border-color: rgba(255, 255, 255, 0.5); }
.button--dark { color: white; background: var(--ink); }
.button--dark:hover { background: #153042; box-shadow: 0 12px 24px rgba(7, 21, 33, 0.16); }
.button--subtle { color: var(--ink); background: #f0f1ed; border-color: #e4e5e0; }

.mobile-menu {
  display: none;
  padding: 8px;
  border: 0;
  background: transparent;
}

.mobile-menu span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 5px;
  background: white;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(380px, 0.8fr) minmax(600px, 1.25fr);
  gap: clamp(30px, 5vw, 84px);
  align-items: center;
  min-height: 865px;
  padding: 145px 0 90px 6vw;
  color: white;
  background:
    radial-gradient(circle at 22% 34%, rgba(49, 104, 238, 0.2), transparent 25%),
    radial-gradient(circle at 80% 54%, rgba(213, 106, 255, 0.14), transparent 30%),
    var(--ink);
}

.hero-glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(2px);
  opacity: 0.8;
}

.hero-glow--one { top: 180px; left: 42%; width: 210px; height: 210px; background: radial-gradient(circle, rgba(38, 105, 244, 0.28), transparent 70%); }
.hero-glow--two { bottom: 10px; left: -70px; width: 270px; height: 270px; background: radial-gradient(circle, rgba(255, 128, 111, 0.16), transparent 70%); }

.hero-copy {
  position: relative;
  z-index: 3;
  max-width: 630px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.eyebrow span {
  width: 8px;
  height: 8px;
  background: var(--lime);
  border-radius: 2px;
  box-shadow: 0 0 0 5px rgba(220, 255, 104, 0.1);
}

.eyebrow--dark { color: #687074; }
.eyebrow--dark span { background: var(--blue); box-shadow: 0 0 0 5px rgba(40, 105, 244, 0.1); }

.hero h1,
.section-intro h2,
.automation-copy h2,
.results-copy h2,
.final-cta h2 {
  margin: 0;
  font-size: clamp(46px, 5.1vw, 79px);
  font-weight: 770;
  line-height: 0.98;
  letter-spacing: -0.064em;
}

.hero h1 em,
.section-intro h2 em,
.automation-copy h2 em,
.final-cta h2 em {
  color: var(--lime);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.05em;
}

.hero-lead {
  max-width: 580px;
  margin: 28px 0 31px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 18px;
  line-height: 1.65;
}

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

.hero-proof {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 34px;
}

.hero-proof p {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  line-height: 1.5;
}

.hero-proof strong { color: white; }

.avatar-stack {
  display: flex;
}

.avatar-stack span {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  margin-left: -7px;
  color: var(--ink);
  background: #f5c9a9;
  border: 2px solid var(--ink);
  border-radius: 50%;
  font-size: 9px;
  font-weight: 800;
}

.avatar-stack span:first-child { margin-left: 0; background: var(--coral); }
.avatar-stack span:nth-child(2) { background: var(--blue-soft); }
.avatar-stack span:nth-child(3) { background: var(--lime); }
.avatar-stack span:nth-child(4) { color: white; background: var(--ink-3); }

.hero-product {
  position: relative;
  z-index: 2;
  min-width: 0;
  perspective: 1500px;
}

.product-window {
  width: 840px;
  max-width: 112%;
  overflow: hidden;
  background: #f7f8f4;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 22px;
  box-shadow: 0 50px 130px rgba(0, 0, 0, 0.45), 0 0 0 8px rgba(255, 255, 255, 0.035);
  transform: rotateY(-7deg) rotateX(1deg);
  transform-origin: left center;
}

.window-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 62px;
  padding: 0 20px;
  color: var(--ink);
  background: white;
  border-bottom: 1px solid #e6e8e3;
}

.mini-brand { display: grid; place-items: center; width: 31px; height: 31px; background: var(--ink); border-radius: 9px; }
.window-search { flex: 1; max-width: 330px; padding: 9px 14px; color: #889196; background: #f2f3f0; border-radius: 8px; font-size: 10px; }
.window-user { display: grid; place-items: center; width: 30px; height: 30px; margin-left: auto; color: white; background: var(--blue); border-radius: 50%; font-size: 10px; font-weight: 800; }
.window-body { display: flex; height: 530px; color: var(--ink); }
.mock-sidebar { display: flex; flex-direction: column; align-items: center; gap: 17px; width: 64px; padding-top: 22px; color: #849096; background: white; border-right: 1px solid #e6e8e3; font-size: 15px; }
.mock-sidebar span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 8px; }
.mock-sidebar .active { color: white; background: var(--blue); }
.mock-content { flex: 1; min-width: 0; padding: 25px 22px; }
.mock-heading { display: flex; justify-content: space-between; align-items: center; }
.mock-heading div { display: flex; flex-direction: column; gap: 5px; }
.mock-heading small { color: #879095; font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; }
.mock-heading strong { font-size: 22px; letter-spacing: -0.04em; }
.mock-heading > span { padding: 9px 12px; color: white; background: var(--ink); border-radius: 8px; font-size: 9px; font-weight: 700; }
.mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
.mock-stats div { display: grid; grid-template-columns: 1fr auto; gap: 7px; padding: 14px; background: white; border: 1px solid #e8e9e5; border-radius: 11px; }
.mock-stats small { grid-column: 1 / -1; color: #8c9497; font-size: 8px; }
.mock-stats strong { font-size: 19px; letter-spacing: -0.04em; }
.mock-stats b { align-self: end; color: #7d878b; font-size: 7px; font-weight: 600; }
.mock-stats .up { color: #3d8b62; }
.mock-board { display: grid; grid-template-columns: repeat(3, 215px); gap: 11px; }
.mock-column { min-height: 355px; padding: 11px; background: #eceeea; border-radius: 12px; }
.mock-column--fade { opacity: 0.62; }
.mock-column > header { display: flex; align-items: center; justify-content: space-between; padding: 3px 2px 11px; font-size: 9px; font-weight: 800; }
.mock-column > header b { display: grid; place-items: center; width: 18px; height: 18px; background: white; border-radius: 5px; font-size: 8px; }
.mock-column article { position: relative; display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; padding: 14px 12px 10px; background: white; border: 1px solid #e4e5e1; border-radius: 10px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.03); }
.mock-column article.card-accent { box-shadow: inset 3px 0 var(--lime); }
.mock-column article strong { font-size: 10px; }
.mock-column article small { color: #879094; font-size: 8px; }
.mock-column article p { min-height: 27px; margin: 8px 0 12px; padding: 7px; color: #546066; background: #f5f6f3; border-radius: 5px; font-size: 8px; line-height: 1.45; }
.mock-column article footer { display: flex; align-items: center; justify-content: space-between; }
.mock-column article footer span { display: grid; place-items: center; width: 21px; height: 21px; color: white; background: var(--blue); border-radius: 50%; font-size: 7px; font-weight: 800; }
.mock-column article footer time { color: #8b9497; font-size: 7px; }
.priority { position: absolute; top: 13px; right: 12px; width: 7px; height: 7px; border-radius: 50%; }
.priority--hot { background: var(--coral); }
.priority--warm { background: #efb940; }
.priority--cold { background: #80b0bb; }

.floating-prompt {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  color: var(--ink);
  background: white;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.28);
  font-size: 10px;
}

.floating-prompt strong { display: block; margin-bottom: 2px; font-size: 10px; }
.prompt-icon { display: grid; place-items: center; width: 30px; height: 30px; background: var(--lime); border-radius: 8px; font-size: 15px; }
.prompt--one { top: -25px; left: 100px; }
.prompt--two { right: 10%; bottom: -24px; }
.status-dot { width: 8px; height: 8px; background: #44bb73; border-radius: 50%; box-shadow: 0 0 0 4px #dff5e8; }

.outcome-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  color: var(--ink);
  background: var(--lime);
  border-bottom: 1px solid rgba(7, 21, 33, 0.12);
}

.outcome-strip p {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 78px;
  margin: 0;
  padding: 0 24px;
  border-right: 1px solid rgba(7, 21, 33, 0.12);
  font-size: 13px;
  font-weight: 750;
}

.outcome-strip span { color: rgba(7, 21, 33, 0.45); font-family: Georgia, serif; font-style: italic; font-weight: 400; }

.section {
  padding: 120px 6vw;
}

.section-intro {
  max-width: 1000px;
  margin-bottom: 58px;
}

.section-intro h2,
.automation-copy h2,
.results-copy h2 {
  font-size: clamp(42px, 5vw, 70px);
}

.section-intro h2 em { color: var(--blue); }
.section-intro > p { max-width: 650px; margin: 26px 0 0; color: #6b7478; font-size: 17px; line-height: 1.65; }

.workflow-section { background: var(--paper); }
.workflow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card { display: flex; flex-direction: column; min-height: 575px; padding: 18px; overflow: hidden; background: #ebece7; border: 1px solid #dfe1dc; border-radius: 25px; }
.feature-card > div:last-child { padding: 28px 13px 13px; }
.feature-card h3 { margin: 0 0 13px; font-size: 24px; letter-spacing: -0.04em; }
.feature-card p { margin: 0; color: #687176; font-size: 14px; line-height: 1.65; }
.feature-number { align-self: flex-end; display: grid; place-items: center; width: 39px; height: 39px; margin-bottom: 12px; color: #6f787b; background: white; border-radius: 50%; font-family: Georgia, serif; font-size: 13px; font-style: italic; }
.capture-visual,
.note-visual,
.move-visual { position: relative; flex: 1; min-height: 310px; overflow: hidden; background: var(--ink); border-radius: 17px; }
.capture-visual { display: grid; place-items: center; background: linear-gradient(145deg, #122b39, #081722); }
.business-card { display: flex; align-items: center; gap: 30px; width: 82%; padding: 34px 28px; color: var(--ink); background: #fffef8; border-radius: 15px; box-shadow: 0 25px 40px rgba(0, 0, 0, 0.24); transform: rotate(-4deg); }
.fake-logo { color: var(--blue); font-size: 15px; font-weight: 900; line-height: 0.9; }
.business-card div { display: flex; flex-direction: column; }
.business-card strong { margin-bottom: 6px; font-size: 17px; }
.business-card small { margin: 2px 0; color: #6f787b; font-size: 9px; }
.scan-line { position: absolute; top: 47%; left: 7%; width: 86%; height: 2px; background: var(--lime); box-shadow: 0 0 18px var(--lime); animation: scan 3s ease-in-out infinite; }
@keyframes scan { 0%,100%{ transform: translateY(-80px); opacity:.4} 50%{transform:translateY(90px);opacity:1} }
.captured-chip { position: absolute; right: 17px; bottom: 17px; padding: 10px 12px; color: var(--ink); background: var(--lime); border-radius: 8px; font-size: 9px; font-weight: 800; }
.note-visual { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 10px; padding: 28px; background: linear-gradient(145deg, #fff3ed, #ffd9cf); }
.note-bubble { max-width: 92%; padding: 26px 25px; color: var(--ink); background: white; border: 1px solid rgba(7, 21, 33, 0.08); border-radius: 15px 15px 15px 3px; box-shadow: 0 18px 35px rgba(150, 71, 50, 0.11); font-size: 14px; font-weight: 650; line-height: 1.5; }
.note-bubble span { margin-right: 6px; color: var(--coral); font-family: Georgia, serif; font-size: 25px; }
.action-chip { align-self: flex-end; padding: 10px 13px; color: white; background: var(--ink); border-radius: 999px; font-size: 9px; font-weight: 700; }
.action-chip--blue { align-self: flex-start; color: var(--ink); background: white; }
.move-visual { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 30px; background: linear-gradient(145deg, #dce7ff, #c8d8ff); }
.stage-row { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 16px; color: #6d7783; background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7); border-radius: 10px; font-size: 11px; font-weight: 750; }
.stage-row.current { z-index: 2; color: var(--ink); background: white; box-shadow: 0 14px 30px rgba(40, 77, 150, 0.18); transform: scale(1.06); }
.stage-row b { display: grid; place-items: center; width: 28px; height: 28px; color: white; background: var(--blue); border-radius: 50%; font-size: 8px; }
.stage-line { position: absolute; left: 35px; bottom: -12px; width: 2px; height: 13px; background: #b2bbc3; }
.stage-line.active { background: var(--blue); }

.automation-section {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 7vw;
  align-items: center;
  color: white;
  background:
    radial-gradient(circle at 90% 15%, rgba(40, 105, 244, .22), transparent 28%),
    radial-gradient(circle at 14% 90%, rgba(255, 128, 111, .12), transparent 24%),
    var(--ink);
}

.automation-copy h2 em { color: var(--lime); }
.automation-copy > p { margin: 28px 0; color: rgba(255, 255, 255, 0.65); font-size: 17px; line-height: 1.65; }
.check-list { display: grid; gap: 16px; margin: 32px 0; padding: 0; list-style: none; }
.check-list li { display: grid; grid-template-columns: 27px 1fr; gap: 12px; align-items: start; color: rgba(255,255,255,.78); font-size: 13px; line-height: 1.55; }
.check-list li span { display: grid; place-items: center; width: 24px; height: 24px; color: var(--ink); background: var(--lime); border-radius: 50%; font-size: 11px; font-weight: 900; }
.text-link { padding: 0; color: white; background: transparent; border: 0; font-weight: 750; cursor: pointer; }
.text-link span { display: inline-block; margin-left: 7px; color: var(--lime); transition: transform 160ms ease; }
.text-link:hover span { transform: translateX(5px); }
.automation-canvas { display: flex; flex-direction: column; align-items: center; min-height: 590px; padding: 60px 45px; background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12); border-radius: 26px; box-shadow: inset 0 1px rgba(255,255,255,.06); }
.automation-node { display: flex; align-items: center; gap: 15px; width: 100%; max-width: 440px; min-height: 95px; padding: 17px; color: var(--ink); background: white; border: 1px solid rgba(255,255,255,.4); border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.18); }
.automation-node > div { flex: 1; }
.automation-node small { display: block; margin-bottom: 5px; color: #91999c; font-size: 8px; font-weight: 800; letter-spacing: .13em; }
.automation-node strong { display: block; font-size: 13px; }
.automation-node p { margin: 5px 0 0; color: #8a9397; font-size: 9px; }
.automation-node > b { display: grid; place-items: center; width: 23px; height: 23px; color: white; background: #39ac6c; border-radius: 50%; font-size: 9px; }
.node-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 11px; font-size: 16px; }
.node-icon--lime { background: var(--lime); }
.node-icon--blue { color: white; background: var(--blue); }
.node-icon--coral { background: var(--coral); }
.connector { display: grid; place-items: center; height: 72px; }
.connector i { display: block; width: 2px; height: 72px; background: linear-gradient(var(--lime), rgba(220,255,104,.25)); }
.automation-split { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.automation-split::before { content: ""; position: absolute; top: -18px; left: 25%; width: 50%; height: 18px; border: 2px solid rgba(220,255,104,.45); border-bottom: 0; border-radius: 12px 12px 0 0; }
.automation-split .automation-node { min-width: 0; min-height: 132px; align-items: flex-start; }
.automation-split .automation-node strong { font-size: 11px; }
.automation-success { display: flex; justify-content: space-between; width: 100%; margin-top: 28px; padding: 13px 16px; color: #98a5aa; background: rgba(0,0,0,.17); border-radius: 9px; font-size: 9px; }
.automation-success strong { color: rgba(255,255,255,.75); }

.results-section { background: #e7e9e4; }
.results-card { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7vw; padding: 75px; background: var(--white); border-radius: 30px; box-shadow: 0 2px 0 rgba(7,21,33,.05); }
.results-copy h2 { font-size: clamp(40px, 4.6vw, 66px); }
.results-copy p { margin: 26px 0 30px; color: #697276; line-height: 1.65; }
.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.metric { display: flex; flex-direction: column; justify-content: space-between; min-height: 190px; padding: 25px; border-radius: 18px; }
.metric strong { font-size: 47px; letter-spacing: -.07em; }
.metric span { max-width: 150px; font-size: 12px; font-weight: 650; line-height: 1.45; }
.metric--lime { background: var(--lime); }
.metric--blue { color: white; background: var(--blue); }
.metric--coral { background: var(--coral-soft); }
.quote-card { display: flex; flex-direction: column; justify-content: space-between; grid-column: span 1; padding: 25px; color: white; background: var(--ink); border-radius: 18px; }
.quote-card p { margin: 0; font-family: Georgia, serif; font-size: 17px; font-style: italic; line-height: 1.5; }
.quote-card footer { display: flex; align-items: center; gap: 11px; }
.quote-card footer > b { display: grid; place-items: center; width: 34px; height: 34px; color: var(--ink); background: var(--lime); border-radius: 50%; font-size: 9px; }
.quote-card footer span { display: flex; flex-direction: column; color: rgba(255,255,255,.52); font-size: 9px; }
.quote-card footer span strong { color: white; font-size: 10px; letter-spacing: 0; }

.final-cta { position: relative; display: grid; place-items: center; min-height: 620px; overflow: hidden; padding: 100px 20px; color: white; text-align: center; background: var(--blue); }
.final-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.12), transparent 50%); }
.cta-orbit { position: absolute; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; }
.orbit--one { width: 650px; height: 650px; }
.orbit--two { width: 940px; height: 940px; }
.cta-content { position: relative; z-index: 2; }
.cta-kicker { display: block; margin-bottom: 25px; color: rgba(255,255,255,.68); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.final-cta h2 { font-size: clamp(48px, 6vw, 80px); }
.final-cta h2 em { color: var(--lime); }
.final-cta p { margin: 28px auto 32px; color: rgba(255,255,255,.7); font-size: 16px; }

.site-footer { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 42px; padding: 75px 6vw 32px; color: rgba(255,255,255,.6); background: var(--ink); font-size: 12px; }
.footer-brand p { max-width: 260px; margin-top: 19px; line-height: 1.6; }
.site-footer > div:not(.footer-brand):not(.footer-bottom) { display: flex; flex-direction: column; gap: 13px; }
.site-footer strong { color: white; }
.footer-bottom { display: flex; justify-content: space-between; grid-column: 1 / -1; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.1); }

/* CRM application */
.crm-app {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100vh;
  color: var(--ink);
  background: #f2f3ef;
}

.crm-app[aria-hidden="true"] { display: none; }
.landing-page.is-hidden { display: none; }
.app-sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; display: flex; flex-direction: column; width: 248px; padding: 22px 16px 15px; background: white; border-right: 1px solid #dfe3de; }
.app-brand { padding: 0 10px 21px; }
.workspace-switcher { display: grid; grid-template-columns: 33px 1fr auto; gap: 9px; align-items: center; padding: 11px; background: #f2f3ef; border: 1px solid #e4e6e1; border-radius: 10px; }
.workspace-logo { display: grid; place-items: center; width: 33px; height: 33px; color: white; background: var(--blue); border-radius: 9px; font-size: 9px; font-weight: 800; }
.workspace-switcher > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.workspace-switcher small { color: #899195; font-size: 8px; }
.workspace-switcher strong { overflow: hidden; margin-top: 3px; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.workspace-switcher button { border: 0; background: transparent; }
.app-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 23px; }
.app-nav > small { margin: 13px 10px 5px; color: #a1a8aa; font-size: 8px; font-weight: 850; letter-spacing: .13em; }
.app-nav button { position: relative; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; width: 100%; min-height: 41px; padding: 0 11px; color: #687176; background: transparent; border: 0; border-radius: 8px; text-align: left; font-size: 12px; font-weight: 650; cursor: pointer; }
.app-nav button:hover { color: var(--ink); background: #f3f4f0; }
.app-nav button.active { color: white; background: var(--ink); }
.app-nav button > span { font-size: 15px; }
.app-nav button b { display: grid; place-items: center; min-width: 21px; height: 19px; padding: 0 5px; color: #697176; background: #eceeea; border-radius: 999px; font-size: 8px; }
.app-nav button.active b { color: var(--ink); background: var(--lime); }
.app-nav button i { width: 6px; height: 6px; background: var(--coral); border-radius: 50%; }
.sidebar-tip { margin-top: auto; padding: 15px; background: #f0f4ff; border: 1px solid #e0e7fa; border-radius: 11px; }
.sidebar-tip > span { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 10px; color: white; background: var(--blue); border-radius: 7px; }
.sidebar-tip strong { font-size: 11px; }
.sidebar-tip p { margin: 7px 0 10px; color: #778087; font-size: 9px; line-height: 1.5; }
.sidebar-tip button { padding: 0; color: var(--blue); background: transparent; border: 0; font-size: 9px; font-weight: 750; cursor: pointer; }
.sidebar-user { display: grid; grid-template-columns: 32px 1fr auto; gap: 9px; align-items: center; margin-top: 12px; padding: 11px 7px 0; border-top: 1px solid #e8eae6; }
.sidebar-user > span { display: grid; place-items: center; width: 32px; height: 32px; color: var(--ink); background: var(--lime); border-radius: 50%; font-size: 9px; font-weight: 800; }
.sidebar-user div { display: flex; flex-direction: column; }
.sidebar-user strong { font-size: 10px; }
.sidebar-user small { color: #939a9c; font-size: 8px; }
.sidebar-user button { border: 0; background: transparent; font-size: 11px; }
.app-shell { grid-column: 2; min-width: 0; }
.app-topbar { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; gap: 13px; height: 74px; padding: 0 26px; background: rgba(255,255,255,.94); border-bottom: 1px solid #dde1dc; backdrop-filter: blur(18px); }
.sidebar-toggle { display: none; background: transparent; border: 0; font-size: 20px; }
.app-search { display: flex; align-items: center; flex: 1; max-width: 520px; min-height: 39px; padding: 0 12px; color: #929a9d; background: #f3f4f1; border: 1px solid #e5e7e2; border-radius: 8px; }
.app-search input { flex: 1; min-width: 0; padding: 0 10px; background: transparent; border: 0; outline: 0; font-size: 11px; }
.app-search kbd { padding: 3px 6px; color: #90989b; background: white; border: 1px solid #dfe2de; border-radius: 4px; font-family: var(--sans); font-size: 8px; }
.event-context { display: flex; align-items: center; gap: 9px; margin-left: auto; padding: 0 13px; height: 42px; background: #f6f7f4; border: 1px solid #e3e5e1; border-radius: 9px; }
.live-dot { width: 7px; height: 7px; background: #34b46d; border: 2px solid white; border-radius: 50%; box-shadow: 0 0 0 3px #d9f1e4; }
.event-context div { display: flex; flex-direction: column; }
.event-context small { color: #969da0; font-size: 7px; font-weight: 800; letter-spacing: .09em; }
.event-context strong { margin-top: 2px; font-size: 9px; }
.event-context button { padding: 0; border: 0; background: transparent; }
.icon-button { position: relative; display: grid; place-items: center; width: 41px; height: 41px; background: white; border: 1px solid #dfe2de; border-radius: 9px; cursor: pointer; }
.icon-button i { position: absolute; top: -3px; right: -3px; display: grid; place-items: center; width: 15px; height: 15px; color: white; background: var(--coral); border: 2px solid white; border-radius: 50%; font-size: 6px; font-style: normal; font-weight: 800; }
.app-main { min-height: calc(100vh - 74px); padding: 32px 30px 55px; }
.view-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 26px; }
.view-header h1 { margin: 0; font-size: 30px; line-height: 1.1; letter-spacing: -.045em; }
.view-header p { margin: 7px 0 0; color: #81898d; font-size: 11px; }
.view-header-actions { display: flex; gap: 8px; }
.filter-button,
.export-button { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 13px; background: white; border: 1px solid #dfe2de; border-radius: 8px; font-size: 10px; font-weight: 700; cursor: pointer; }
.date-chip { display: flex; align-items: center; gap: 8px; min-height: 37px; padding: 0 13px; color: #687176; background: white; border: 1px solid #dfe2de; border-radius: 8px; font-size: 9px; }

.dashboard-grid { display: grid; grid-template-columns: 1fr 310px; gap: 17px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; grid-column: 1 / -1; }
.stat-card { position: relative; min-height: 128px; padding: 19px; overflow: hidden; background: white; border: 1px solid #dee2dc; border-radius: 13px; }
.stat-card small { display: block; color: #858d90; font-size: 9px; font-weight: 650; }
.stat-card > strong { display: block; margin-top: 13px; font-size: 30px; letter-spacing: -.06em; }
.stat-card footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 12px; color: #92999b; font-size: 8px; }
.stat-trend { color: #23875a; font-weight: 800; }
.stat-card--dark { color: white; background: var(--ink); border-color: var(--ink); }
.stat-card--dark small,
.stat-card--dark footer { color: rgba(255,255,255,.52); }
.stat-card--dark::after { content:""; position:absolute; right:-28px; bottom:-42px; width:100px; height:100px; background:var(--lime); border-radius:50%; opacity:.13; }
.panel { background: white; border: 1px solid #dee2dc; border-radius: 14px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; min-height: 57px; padding: 0 18px; border-bottom: 1px solid #e6e8e4; }
.panel-header h2 { margin: 0; font-size: 13px; letter-spacing: -.02em; }
.panel-header > span { color: #939a9d; font-size: 8px; }
.panel-header button { padding: 0; color: var(--blue); background: transparent; border: 0; font-size: 9px; font-weight: 750; cursor: pointer; }
.today-panel { min-width: 0; }
.task-list { margin: 0; padding: 0; list-style: none; }
.task-item { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; gap: 12px; align-items: center; min-height: 74px; padding: 11px 18px; border-bottom: 1px solid #edf0eb; cursor: pointer; transition: background 140ms ease; }
.task-item:last-child { border-bottom: 0; }
.task-item:hover { background: #f8f9f6; }
.task-time { color: #6f787c; font-size: 9px; font-weight: 750; }
.task-contact { display: flex; flex-direction: column; min-width: 0; }
.task-contact strong { overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.task-contact small { overflow: hidden; margin-top: 5px; color: #8a9295; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.task-action { display: flex; align-items: center; gap: 8px; }
.task-type { padding: 5px 7px; color: #445056; background: #f1f2ef; border-radius: 5px; font-size: 7px; font-weight: 750; }
.task-arrow { color: #a2a9ab; }
.progress-panel { padding-bottom: 15px; }
.funnel-list { display: grid; gap: 17px; padding: 18px; }
.funnel-item header { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 9px; }
.funnel-item header span { color: #778084; }
.funnel-bar { height: 7px; overflow: hidden; background: #edf0eb; border-radius: 999px; }
.funnel-bar i { display: block; height: 100%; background: var(--blue); border-radius: inherit; }
.funnel-item:nth-child(2) i { background: #6f91e8; }
.funnel-item:nth-child(3) i { background: #efb54f; }
.funnel-item:nth-child(4) i { background: #40ad70; }
.mini-insight { margin: 0 15px; padding: 12px; color: #5b6670; background: #f0f4ff; border-radius: 8px; font-size: 8px; line-height: 1.5; }
.mini-insight strong { color: var(--blue); }
.priority-panel { grid-column: 1 / -1; }
.contact-row { display: grid; grid-template-columns: 2fr 1.3fr 1.6fr .8fr 1fr 32px; gap: 14px; align-items: center; min-height: 65px; padding: 0 18px; border-bottom: 1px solid #edf0eb; cursor: pointer; }
.contact-row:last-child { border-bottom: 0; }
.contact-row:hover { background: #fafbf8; }
.contact-row:focus-visible { background: #f2f6ff; }
.contact-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.avatar { display: grid; place-items: center; flex: 0 0 auto; width: 33px; height: 33px; color: white; background: var(--blue); border-radius: 9px; font-size: 8px; font-weight: 850; }
.avatar--round { border-radius: 50%; }
.contact-identity > div { display: flex; flex-direction: column; min-width: 0; }
.contact-identity strong { overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.contact-identity small { overflow: hidden; margin-top: 3px; color: #8c9497; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.cell-label { color: #788185; font-size: 9px; }
.stage-pill,
.priority-pill,
.tag-pill { display: inline-flex; align-items: center; width: max-content; min-height: 23px; padding: 0 8px; border-radius: 999px; font-size: 7px; font-weight: 800; }
.stage-pill { color: #285fc3; background: #e4ecff; }
.stage-pill--new { color: #677176; background: #eceeea; }
.stage-pill--contact { color: #835d11; background: #fff0c8; }
.stage-pill--offer { color: #a0463b; background: #ffe3de; }
.stage-pill--won { color: #277c50; background: #dff3e7; }
.priority-pill--hot { color: #a33e32; background: var(--coral-soft); }
.priority-pill--warm { color: #8a6314; background: #fff0c8; }
.priority-pill--cold { color: #52717b; background: #e4eef0; }
.table-arrow { color: #adb3b5; }

/* Pipeline */
.pipeline-toolbar { display: flex; align-items: center; gap: 9px; margin-bottom: 17px; }
.pipeline-toolbar label { display: flex; align-items: center; gap: 7px; min-width: 210px; padding: 0 10px; height: 37px; color: #92999c; background: white; border: 1px solid #dfe2de; border-radius: 8px; }
.pipeline-toolbar input { width: 100%; border: 0; outline: 0; font-size: 9px; }
.pipeline-value { margin-left: auto; color: #747d81; font-size: 9px; }
.pipeline-value strong { margin-left: 4px; color: var(--ink); font-size: 12px; }
.kanban-board { display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 11px; overflow-x: auto; padding-bottom: 16px; }
.kanban-column { min-height: 620px; padding: 10px; background: #e8eae6; border: 1px solid #dfe2dd; border-radius: 12px; transition: background 150ms ease, border 150ms ease; }
.kanban-column.drag-over { background: #e5edff; border-color: var(--blue); }
.kanban-column-header { display: flex; align-items: center; justify-content: space-between; min-height: 40px; padding: 0 5px 9px; }
.kanban-column-header div { display: flex; align-items: center; gap: 7px; }
.stage-dot { width: 7px; height: 7px; background: #9da5a7; border-radius: 50%; }
.stage-dot--contact { background: #efb84e; }
.stage-dot--qualified { background: var(--blue); }
.stage-dot--offer { background: var(--coral); }
.stage-dot--won { background: #39a96c; }
.kanban-column-header strong { font-size: 9px; }
.kanban-count { display: grid; place-items: center; min-width: 21px; height: 20px; padding: 0 5px; color: #677075; background: white; border-radius: 5px; font-size: 8px; }
.kanban-total { color: #899194; font-size: 8px; }
.kanban-cards { display: flex; flex-direction: column; gap: 8px; min-height: 530px; }
.lead-card { position: relative; padding: 14px; background: white; border: 1px solid #dcdfda; border-radius: 10px; box-shadow: 0 2px 4px rgba(7,21,33,.03); cursor: grab; transition: transform 140ms ease, box-shadow 140ms ease; }
.lead-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(7,21,33,.08); }
.lead-card:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 5px rgba(40,105,244,.16), 0 8px 20px rgba(7,21,33,.08); }
.lead-card.dragging { opacity: .45; }
.lead-card-top { display: flex; align-items: start; justify-content: space-between; }
.lead-card-top > div { min-width: 0; }
.lead-card-top strong { display: block; overflow: hidden; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.lead-card-top small { display: block; overflow: hidden; margin-top: 4px; color: #8b9396; font-size: 8px; white-space: nowrap; text-overflow: ellipsis; }
.priority-beacon { width: 7px; height: 7px; margin-top: 2px; border-radius: 50%; }
.priority-beacon.hot { background: var(--coral); box-shadow: 0 0 0 4px #ffe9e4; }
.priority-beacon.warm { background: #eeb74b; box-shadow: 0 0 0 4px #fff3d7; }
.priority-beacon.cold { background: #79a6b2; box-shadow: 0 0 0 4px #e9f0f2; }
.lead-card-note { min-height: 48px; margin: 12px 0; padding: 9px; color: #657075; background: #f5f6f3; border-radius: 7px; font-size: 8px; line-height: 1.5; }
.lead-card-meta { display: flex; align-items: center; justify-content: space-between; }
.lead-card-meta div { display: flex; align-items: center; gap: 5px; }
.lead-card-meta .avatar { width: 23px; height: 23px; border-radius: 50%; font-size: 6px; }
.due-chip { color: #7c8589; font-size: 7px; }
.due-chip.overdue { color: #ba493d; font-weight: 800; }
.card-value { margin-left: auto; color: #657075; font-size: 8px; font-weight: 750; }
.card-automation { display: inline-flex; align-items: center; gap: 4px; margin-top: 9px; color: #3462b8; font-size: 7px; font-weight: 700; }
.card-automation i { width: 5px; height: 5px; background: var(--blue); border-radius: 50%; }
.empty-column { display: grid; place-items: center; min-height: 130px; color: #9ba2a4; border: 1px dashed #cdd2cd; border-radius: 9px; font-size: 8px; }

/* Contacts */
.contacts-panel { overflow: hidden; }
.contacts-toolbar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid #e5e8e3; }
.contacts-toolbar label { display: flex; align-items: center; flex: 1; max-width: 330px; height: 36px; padding: 0 10px; color: #929a9d; background: #f5f6f3; border-radius: 7px; }
.contacts-toolbar input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 9px; }
.contacts-toolbar select { height: 36px; padding: 0 28px 0 10px; color: #5e686d; background: white; border: 1px solid #dfe2de; border-radius: 7px; font-size: 9px; }
.contact-table-head { display: grid; grid-template-columns: 2fr 1.4fr 1.4fr 1fr .8fr 32px; gap: 14px; min-height: 38px; align-items: center; padding: 0 18px; color: #969da0; background: #fafbf8; border-bottom: 1px solid #e7e9e5; font-size: 7px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.contact-table .contact-row { grid-template-columns: 2fr 1.4fr 1.4fr 1fr .8fr 32px; }
.table-empty { padding: 55px; color: #899194; text-align: center; font-size: 11px; }

/* Automations */
.automation-dashboard { display: grid; grid-template-columns: 1.35fr .65fr; gap: 16px; }
.automation-list { display: flex; flex-direction: column; }
.automation-rule { display: grid; grid-template-columns: 43px 1fr auto; gap: 13px; align-items: center; min-height: 89px; padding: 15px 18px; border-bottom: 1px solid #e8eae6; }
.automation-rule:last-child { border-bottom: 0; }
.rule-icon { display: grid; place-items: center; width: 43px; height: 43px; background: #e6edff; border-radius: 11px; color: var(--blue); font-size: 16px; }
.rule-icon--lime { color: #556a12; background: #efffc0; }
.rule-icon--coral { color: #a5473a; background: #ffe7e2; }
.automation-rule h3 { margin: 0 0 5px; font-size: 11px; }
.automation-rule p { margin: 0; color: #899195; font-size: 8px; line-height: 1.5; }
.rule-stats { display: flex; align-items: center; gap: 13px; }
.rule-stats span { color: #8d9598; font-size: 8px; }
.switch { position: relative; width: 34px; height: 19px; padding: 0; background: #cdd2ce; border: 0; border-radius: 999px; cursor: pointer; }
.switch::after { content:""; position:absolute; top:3px; left:3px; width:13px; height:13px; background:white; border-radius:50%; transition:transform 150ms ease; }
.switch.on { background: var(--blue); }
.switch.on::after { transform: translateX(15px); }
.activity-feed { padding: 3px 17px 17px; }
.activity-item { position: relative; display: grid; grid-template-columns: 25px 1fr; gap: 10px; padding: 14px 0; }
.activity-item:not(:last-child)::after { content:""; position:absolute; left:12px; top:39px; bottom:-5px; width:1px; background:#e1e4df; }
.activity-icon { z-index: 1; display:grid; place-items:center; width:25px; height:25px; color:var(--blue); background:#e7edff; border-radius:50%; font-size:8px; }
.activity-item strong { display: block; font-size: 8px; line-height: 1.45; }
.activity-item p { margin: 3px 0 0; color: #92999b; font-size: 7px; }

/* Events and settings */
.event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.event-card { overflow: hidden; background: white; border: 1px solid #dfe2dd; border-radius: 14px; }
.event-card-cover { position: relative; min-height: 120px; padding: 17px; color: white; background: linear-gradient(140deg, #143345, #2869f4); }
.event-card:nth-child(2) .event-card-cover { background: linear-gradient(140deg, #56373d, #ff806f); }
.event-card:nth-child(3) .event-card-cover { background: linear-gradient(140deg, #49581d, #9bbd37); }
.event-card-cover span { font-family: Georgia, serif; font-size: 38px; font-style: italic; opacity: .25; }
.event-card-cover b { position: absolute; right: 14px; top: 14px; padding: 5px 7px; color: var(--ink); background: var(--lime); border-radius: 5px; font-size: 6px; letter-spacing: .08em; }
.event-card-cover h3 { position: absolute; left: 17px; bottom: 15px; margin: 0; font-size: 18px; letter-spacing: -.04em; }
.event-card-body { padding: 16px; }
.event-card-body > p { margin: 0 0 14px; color: #818a8d; font-size: 8px; }
.event-edit { width: 100%; margin-top: 14px; }
.event-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.event-metrics div { display: flex; flex-direction: column; }
.event-metrics strong { font-size: 15px; }
.event-metrics small { color: #969da0; font-size: 7px; }
.settings-grid { display: grid; grid-template-columns: 230px 1fr; gap: 16px; }
.settings-menu { display: flex; flex-direction: column; padding: 8px; }
.settings-menu span { padding: 11px; color: #6f787c; border-radius: 7px; text-align: left; font-size: 9px; }
.settings-menu span.active { color: var(--ink); background: #f0f2ee; font-weight: 750; }
.settings-content { padding: 22px; }
.settings-content h2 { margin: 0 0 5px; font-size: 15px; }
.settings-content > p { margin: 0 0 22px; color: #899195; font-size: 9px; }
.settings-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-top: 1px solid #e7e9e5; }
.settings-row div { display: flex; flex-direction: column; }
.settings-row strong { font-size: 10px; }
.settings-row small { margin-top: 4px; color: #8c9497; font-size: 8px; }

/* Modal and drawer */
.modal-backdrop,
.drawer-backdrop { position: fixed; z-index: 100; inset: 0; visibility: hidden; opacity: 0; background: rgba(4,14,23,.58); backdrop-filter: blur(4px); transition: opacity 180ms ease, visibility 180ms ease; }
.modal-backdrop.open,
.drawer-backdrop.open { visibility: visible; opacity: 1; }
.modal { position: absolute; top: 50%; left: 50%; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; background: white; border-radius: 18px; box-shadow: 0 35px 110px rgba(0,0,0,.35); transform: translate(-50%, -47%) scale(.98); transition: transform 180ms ease; }
.modal-backdrop.open .modal { transform: translate(-50%, -50%) scale(1); }
.modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding: 25px 28px 19px; }
.modal-kicker { color: var(--blue); font-size: 8px; font-weight: 850; letter-spacing: .13em; }
.modal-header h2 { margin: 6px 0 0; font-size: 23px; letter-spacing: -.04em; }
.modal-close,
.drawer-close { display: grid; place-items: center; width: 33px; height: 33px; color: #6d767a; background: #f0f2ee; border: 0; border-radius: 50%; font-size: 21px; cursor: pointer; }
.capture-tabs { display: flex; padding: 0 28px; border-bottom: 1px solid #e4e7e2; }
.capture-tabs button { position: relative; min-height: 43px; padding: 0 16px 0 0; color: #8b9396; background: transparent; border: 0; font-size: 9px; font-weight: 750; cursor: pointer; }
.capture-tabs button + button { padding-left: 16px; }
.capture-tabs button.active { color: var(--ink); }
.capture-tabs button.active::after { content:""; position:absolute; right:16px; bottom:-1px; left:0; height:2px; background:var(--blue); }
.capture-tabs button + button.active::after { left:16px; }
.capture-tabs button span { margin-left: 4px; padding: 2px 4px; color: #3b60a5; background: #e5ecff; border-radius: 3px; font-size: 6px; }
.form-body { display: grid; gap: 20px; padding: 21px 28px 25px; }
fieldset { margin: 0; padding: 0; border: 0; }
legend { width: 100%; margin-bottom: 14px; padding-bottom: 9px; color: #788185; border-bottom: 1px solid #eaede8; font-size: 8px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.form-grid--three { grid-template-columns: 1.3fr 1fr 1fr; margin-top: 13px; }
.form-body label { display: flex; flex-direction: column; gap: 6px; }
.form-body label > span { font-size: 8px; font-weight: 700; }
.form-body input,
.form-body textarea,
.form-body select { width: 100%; padding: 10px 11px; color: var(--ink); background: #f7f8f5; border: 1px solid #dfe3de; border-radius: 7px; outline: 0; font-size: 10px; transition: border 140ms ease, box-shadow 140ms ease; }
.form-body textarea { resize: vertical; line-height: 1.5; }
.form-body input:focus,
.form-body textarea:focus,
.form-body select:focus { background: white; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(40,105,244,.1); }
.span-two { grid-column: span 2; }
.modal-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 17px 28px; background: #f7f8f5; border-top: 1px solid #e2e5e0; }
.modal-footer > div { display: flex; gap: 8px; }
.quick-followup { display: flex; align-items: center; gap: 7px; font-size: 8px; }
.quick-followup input { accent-color: var(--blue); }
.scan-panel { padding: 22px 28px 5px; }
.upload-zone { display: grid; place-items: center; min-height: 205px; padding: 25px; color: #687176; background: #f7f8f5; border: 1px dashed #cbd1cc; border-radius: 12px; text-align: center; cursor: pointer; }
.upload-zone:hover { color: var(--blue); border-color: var(--blue); background: #f3f6ff; }
.upload-icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:8px; color:white; background:var(--blue); border-radius:11px; font-size:17px; }
.upload-zone strong { color: var(--ink); font-size: 11px; }
.upload-zone p { margin: 6px 0; font-size: 9px; }
.upload-zone small { color: #a0a7a9; font-size: 7px; }
.upload-preview { min-height: 160px; padding: 15px; background: #f4f6f2; border-radius: 12px; text-align: center; }
.upload-preview img { max-width: 100%; max-height: 170px; border-radius: 8px; box-shadow: 0 12px 25px rgba(0,0,0,.12); }
.scan-hint { margin: 10px 0; color: #92999c; font-size: 8px; line-height: 1.5; }
.drawer-backdrop { background: rgba(4,14,23,.36); }
.contact-drawer { position: absolute; top: 0; right: 0; width: min(480px, 100vw); height: 100%; overflow-y: auto; background: white; box-shadow: -25px 0 80px rgba(4,14,23,.2); transform: translateX(100%); transition: transform 220ms ease; }
.drawer-backdrop.open .contact-drawer { transform: translateX(0); }
.drawer-close { position: absolute; z-index: 2; top: 19px; right: 19px; }
.drawer-hero { padding: 31px 28px 22px; background: #f5f6f3; border-bottom: 1px solid #e1e4df; }
.drawer-identity { display: flex; align-items: center; gap: 14px; padding-right: 40px; }
.drawer-identity .avatar { width: 51px; height: 51px; border-radius: 14px; font-size: 12px; }
.drawer-identity h2 { margin: 0 0 4px; font-size: 21px; letter-spacing: -.04em; }
.drawer-identity p { margin: 0; color: #747d81; font-size: 9px; }
.drawer-tags { display: flex; gap: 6px; margin-top: 17px; }
.drawer-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 18px; }
.drawer-actions a,
.drawer-actions button { display: flex; justify-content: center; align-items: center; gap: 6px; min-height: 36px; color: #5e686c; background: white; border: 1px solid #dce0db; border-radius: 7px; font-size: 8px; font-weight: 750; cursor: pointer; }
.drawer-section { padding: 22px 28px; border-bottom: 1px solid #e5e8e3; }
.drawer-section h3 { margin: 0 0 15px; color: #81898d; font-size: 8px; letter-spacing: .1em; text-transform: uppercase; }
.drawer-card-image { display:block; width:100%; max-height:240px; object-fit:contain; background:#f3f4f0; border:1px solid #e0e3de; border-radius:10px; }
.drawer-danger-actions { display:flex; gap:8px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.detail-grid div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.detail-grid small { color: #969da0; font-size: 7px; }
.detail-grid strong,
.detail-grid a { overflow: hidden; color: #465258; font-size: 9px; white-space: nowrap; text-overflow: ellipsis; }
.detail-grid .inline-edit { align-self:flex-start; padding:0; color:var(--blue); background:none; border:0; font-size:7px; font-weight:750; cursor:pointer; }
.drawer-actions button:disabled,.filter-button:disabled { opacity:.55; cursor:not-allowed; }
.conversation-box { padding: 14px; color: #566267; background: #f4f5f2; border-left: 3px solid var(--blue); border-radius: 8px; font-size: 9px; line-height: 1.6; }
.agreement-box { display: flex; gap: 10px; align-items: start; margin-top: 10px; padding: 12px; color: #4e5a5f; background: #f3f9da; border-radius: 8px; font-size: 9px; line-height: 1.5; }
.agreement-box span { color: #66821d; font-weight: 900; }
.drawer-stage-track { display: flex; align-items: center; overflow-x: auto; }
.drawer-stage-track button { flex: 0 0 auto; padding: 7px 9px; color: #858e91; background: #f0f2ee; border: 0; font-size: 7px; font-weight: 750; cursor: pointer; }
.drawer-stage-track button + button { margin-left: 2px; }
.drawer-stage-track button.active { color: white; background: var(--blue); }
.drawer-stage-track button.completed { color: #2c7c50; background: #e0f2e7; }
.next-stage-button { width: 100%; margin-top: 11px; }
.timeline { position: relative; display: grid; gap: 16px; }
.timeline-item { display: grid; grid-template-columns: 26px 1fr; gap: 11px; }
.timeline-icon { display: grid; place-items: center; width: 26px; height: 26px; color: var(--blue); background: #e7edff; border-radius: 50%; font-size: 8px; }
.timeline-item strong { display: block; font-size: 8px; }
.timeline-item p { margin: 3px 0 0; color: #969da0; font-size: 7px; line-height: 1.45; }
.add-note { display: flex; gap: 7px; margin-top: 16px; }
.add-note input { flex: 1; min-width: 0; padding: 9px; background: #f5f6f3; border: 1px solid #dfe2de; border-radius: 7px; outline: 0; font-size: 8px; }
.add-note button { padding: 0 12px; color: white; background: var(--ink); border: 0; border-radius: 7px; font-size: 8px; font-weight: 750; cursor: pointer; }
.notification-popover { position: fixed; z-index: 80; top: 67px; right: 165px; width: 300px; padding: 8px; background: white; border: 1px solid #dfe2dd; border-radius: 12px; box-shadow: var(--shadow); }
.notification-popover h3 { margin: 7px 9px 8px; font-size: 11px; }
.notification-popover div { padding: 10px; background: #f6f7f4; border-radius: 7px; font-size: 8px; line-height: 1.45; }
.notification-popover div + div { margin-top: 5px; }
.notification-popover strong { display: block; }
.notification-popover small { color: #8c9497; }
.toast-stack { position: fixed; z-index: 200; right: 22px; bottom: 22px; display: flex; flex-direction: column; gap: 8px; }
.toast { display: flex; align-items: center; gap: 10px; min-width: 280px; padding: 13px 15px; color: white; background: var(--ink); border-radius: 10px; box-shadow: 0 15px 40px rgba(0,0,0,.24); font-size: 9px; transform: translateY(10px); opacity: 0; animation: toastIn 180ms forwards; }
.toast span { display:grid; place-items:center; width:22px; height:22px; color:var(--ink); background:var(--lime); border-radius:50%; font-weight:900; }
@keyframes toastIn { to{transform:translateY(0);opacity:1} }

/* Authentication */
.auth-screen { display: grid; grid-template-columns: minmax(430px,1fr) minmax(430px,560px); min-height: 100vh; background: white; }
.auth-screen[aria-hidden="true"] { display: none; }
.auth-visual { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 35px 4vw 55px; color: white; background: radial-gradient(circle at 80% 20%,rgba(40,105,244,.32),transparent 32%),radial-gradient(circle at 5% 90%,rgba(255,128,111,.18),transparent 28%),var(--ink); }
.auth-visual::after { content:""; position:absolute; right:-110px; bottom:-190px; width:520px; height:520px; border:1px solid rgba(255,255,255,.1); border-radius:50%; box-shadow:0 0 0 90px rgba(255,255,255,.025),0 0 0 180px rgba(255,255,255,.018); }
.auth-story { position: relative; z-index: 2; max-width: 650px; margin: auto 0; }
.auth-story h1 { margin:0; font-size:clamp(48px,5vw,78px); line-height:.98; letter-spacing:-.065em; }
.auth-story h1 em { color:var(--lime); font-family:Georgia,serif; font-weight:400; }
.auth-story > p { max-width:530px; margin:25px 0 33px; color:rgba(255,255,255,.63); font-size:16px; line-height:1.65; }
.auth-proof-card { display:flex; align-items:center; gap:13px; width:max-content; max-width:100%; padding:14px 17px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:11px; }
.auth-proof-card > span { display:grid; place-items:center; width:29px; height:29px; color:var(--ink); background:var(--lime); border-radius:50%; font-weight:900; }
.auth-proof-card div { display:flex; flex-direction:column; }
.auth-proof-card strong { font-size:10px; }
.auth-proof-card small { margin-top:3px; color:rgba(255,255,255,.53); font-size:8px; }
.auth-panel { position:relative; display:grid; place-items:center; padding:55px; }
.auth-back { position:absolute; top:28px; left:30px; padding:0; color:#798286; background:transparent; border:0; font-size:10px; cursor:pointer; }
.auth-card { width:100%; max-width:390px; }
.auth-card .auth-kicker { color:var(--blue); font-size:8px; font-weight:850; letter-spacing:.13em; }
.auth-card h2 { margin:8px 0 8px; font-size:31px; letter-spacing:-.05em; }
.auth-card > p { margin:0 0 27px; color:#81898d; font-size:10px; line-height:1.55; }
.auth-form { display:grid; gap:13px; }
.auth-form label { display:flex; flex-direction:column; gap:6px; }
.auth-form label span { font-size:8px; font-weight:750; }
.auth-form input { width:100%; min-height:44px; padding:0 12px; background:#f6f7f4; border:1px solid #dde1dc; border-radius:8px; outline:0; font-size:10px; }
.auth-form input:focus { background:white; border-color:var(--blue); box-shadow:0 0 0 3px rgba(40,105,244,.1); }
.auth-form .button { width:100%; margin-top:5px; }
.auth-check { flex-direction:row!important; align-items:start; color:#697276; font-size:8px; line-height:1.5; }
.auth-check input { width:auto; min-height:0; margin-top:2px; accent-color:var(--blue); }
.auth-card > .auth-switch { margin:28px 0 0; color:#81898d; text-align:center; font-size:9px; }
.auth-switch button { padding:0; color:var(--blue); background:transparent; border:0; font-weight:750; cursor:pointer; }
.auth-error { padding:11px 12px; color:#9d3e34; background:#ffe9e4; border-radius:8px; font-size:9px; line-height:1.5; }
.auth-security { display:flex; justify-content:center; gap:18px; margin-top:25px; color:#99a0a3; font-size:7px; }
.auth-security span::before { content:"✓"; margin-right:4px; color:#3e9b69; }

/* Campaigns & server-backed states */
.campaign-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.campaign-list { overflow:hidden; }
.campaign-row { display:grid; grid-template-columns:1.7fr 1fr .75fr .75fr .75fr 34px; gap:14px; align-items:center; min-height:74px; padding:0 18px; border-bottom:1px solid #e8ebe6; }
.campaign-row:last-child { border-bottom:0; }
.campaign-row:hover { background:#fafbf8; }
.campaign-identity { display:flex; align-items:center; gap:11px; min-width:0; }
.campaign-icon { display:grid; place-items:center; flex:0 0 auto; width:36px; height:36px; color:var(--blue); background:#e7edff; border-radius:10px; }
.campaign-identity div { display:flex; flex-direction:column; min-width:0; }
.campaign-identity strong { overflow:hidden; font-size:10px; white-space:nowrap; text-overflow:ellipsis; }
.campaign-identity small { margin-top:4px; color:#92999c; font-size:8px; }
.campaign-status { display:inline-flex; width:max-content; padding:5px 8px; color:#7c641c; background:#fff1cb; border-radius:999px; font-size:7px; font-weight:800; }
.campaign-status--sent { color:#28794f; background:#e0f2e7; }
.campaign-status--sending,.campaign-status--queued { color:#2d60bd; background:#e5edff; }
.campaign-cell { color:#6e787c; font-size:9px; }
.campaign-action { padding:7px; background:transparent; border:0; cursor:pointer; }
.empty-state { display:grid; place-items:center; min-height:280px; padding:35px; text-align:center; }
.empty-state > span { display:grid; place-items:center; width:50px; height:50px; color:var(--blue); background:#e7edff; border-radius:15px; font-size:20px; }
.empty-state h3 { margin:14px 0 7px; font-size:14px; }
.empty-state p { max-width:340px; margin:0 0 18px; color:#899195; font-size:9px; line-height:1.55; }
.audience-preview { margin-top:12px; padding:11px 12px; color:#5d6b72; background:#eff4ff; border-radius:8px; font-size:8px; }
.audience-preview strong { color:var(--blue); }
.template-help { margin:8px 0 0; color:#92999c; font-size:8px; }
.template-help code { margin-left:4px; padding:2px 4px; color:#4262a0; background:#e9eeff; border-radius:3px; font-size:7px; }
.mail-compliance { color:#65814e; font-size:8px; }
.consent-options { display:flex; flex-direction:column; gap:6px; }
.mail-status-card { display:flex; align-items:center; gap:13px; margin-bottom:18px; padding:16px; color:#526067; background:#eff4ff; border:1px solid #dde7ff; border-radius:10px; }
.mail-status-card > span { display:grid; place-items:center; width:34px; height:34px; color:white; background:var(--blue); border-radius:9px; }
.mail-status-card div { display:flex; flex-direction:column; }
.mail-status-card strong { font-size:10px; }
.mail-status-card small { margin-top:4px; color:#78868f; font-size:8px; }
.settings-input { display:flex; gap:8px; }
.settings-input input { min-width:220px; padding:9px 10px; background:#f6f7f4; border:1px solid #dfe2de; border-radius:7px; font-size:9px; }
.settings-subhead { display:flex; align-items:center; justify-content:space-between; margin-top:28px; padding-top:24px; border-top:1px solid #e7e9e5; }
.settings-subhead h2 { margin:0; }
.settings-subhead span { color:#8d9598; font-size:8px; }
.team-list { margin-top:12px; border:1px solid #e2e5e0; border-radius:9px; overflow:hidden; }
.team-row { display:grid; grid-template-columns:34px 1fr auto; gap:10px; align-items:center; min-height:58px; padding:8px 12px; border-bottom:1px solid #eaede8; }
.team-row:last-child { border-bottom:0; }
.team-row > div { display:flex; flex-direction:column; }
.team-row strong { font-size:9px; }
.team-row small { margin-top:3px; color:#91999b; font-size:7px; }
.team-form { margin-top:14px; padding:15px; background:#f6f7f4; border-radius:9px; }
.team-form h3 { margin:0 0 12px; font-size:10px; }
.team-form label { display:flex; flex-direction:column; gap:5px; }
.team-form label span { font-size:7px; font-weight:750; }
.team-form input,.team-form select { min-height:36px; padding:0 9px; background:white; border:1px solid #dfe2de; border-radius:7px; font-size:8px; }
.team-form .settings-input { margin-top:9px; }
.team-form .settings-input input { flex:1; }
.app-loading { position:fixed; z-index:300; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; color:#788185; background:rgba(244,244,237,.86); backdrop-filter:blur(6px); font-size:10px; }
.app-loading[hidden] { display:none; }
.app-loading .brand-mark { animation:loadingPulse 900ms ease-in-out infinite alternate; }
@keyframes loadingPulse { to{transform:rotate(18deg) scale(1.18)} }
.consent-badge { display:inline-flex; align-items:center; width:max-content; padding:4px 7px; border-radius:999px; font-size:7px; font-weight:750; }
.consent-badge--granted { color:#2e7c52; background:#e0f2e7; }
.consent-badge--unknown { color:#806620; background:#fff1cb; }
.consent-badge--revoked { color:#a24438; background:#ffe5df; }
.danger-button { color:#a14338!important; border-color:#efc8c1!important; }

@media (max-width: 1180px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-nav { display: none; }
  .hero { grid-template-columns: 1fr; padding-right: 5vw; }
  .hero-copy { max-width: 720px; padding-top: 60px; }
  .hero-product { margin: 20px 0 0 8vw; }
  .product-window { max-width: 100%; }
  .workflow-grid { grid-template-columns: 1fr 1fr; }
  .feature-card:last-child { grid-column: 1 / -1; min-height: 520px; }
  .feature-card:last-child .move-visual { min-height: 300px; }
  .automation-section { grid-template-columns: 1fr; }
  .automation-copy { max-width: 720px; }
  .results-card { grid-template-columns: 1fr; padding: 55px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .progress-panel { grid-column: 1; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .automation-dashboard { grid-template-columns: 1fr; }
  .auth-screen { grid-template-columns:1fr 480px; }
}

@media (max-width: 900px) {
  .outcome-strip { grid-template-columns: 1fr 1fr; }
  .outcome-strip p:nth-child(2) { border-right: 0; }
  .workflow-grid { grid-template-columns: 1fr; }
  .feature-card:last-child { grid-column: auto; }
  .site-footer { grid-template-columns: 2fr 1fr 1fr; }
  .site-footer > div:nth-child(4) { grid-column: 2; }
  .app-sidebar { transform: translateX(-100%); transition: transform 180ms ease; }
  .crm-app.sidebar-open .app-sidebar { transform: translateX(0); box-shadow: 20px 0 60px rgba(0,0,0,.2); }
  .crm-app { grid-template-columns: 1fr; }
  .app-shell { grid-column: 1; }
  .sidebar-toggle { display: block; }
  .event-context { display: none; }
  .event-grid { grid-template-columns: 1fr 1fr; }
  .auth-screen { grid-template-columns:1fr; }
  .auth-visual { display:none; }
  .auth-panel { min-height:100vh; }
}

@media (max-width: 680px) {
  .site-header { min-height: 70px; padding: 0 20px; }
  .header-actions { display: none; }
  .mobile-menu { display: block; }
  .mobile-menu.open + * { display: block; }
  .site-nav.mobile-open { position: absolute; top: 69px; left: 16px; right: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 10px; color: white; background: var(--ink-2); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; }
  .site-nav.mobile-open a { width: 100%; padding: 12px; }
  .hero { grid-template-columns: minmax(0,1fr); min-height: auto; padding: 125px 20px 75px; }
  .hero h1 { font-size: 46px; }
  .hero-lead { font-size: 15px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-product { margin: 50px 0 0; }
  .product-window { width: 780px; max-width: none; transform: scale(.63); transform-origin: top left; }
  .hero-product { height: 385px; }
  .floating-prompt { display: none; }
  .outcome-strip { grid-template-columns: 1fr; }
  .outcome-strip p { min-height: 61px; border-right: 0; border-bottom: 1px solid rgba(7,21,33,.12); }
  .section { padding: 82px 20px; }
  .section-intro h2,
  .automation-copy h2,
  .results-copy h2 { font-size: 42px; }
  .feature-card { min-height: 525px; }
  .automation-canvas { min-height: 520px; padding: 45px 16px; }
  .automation-split { grid-template-columns: 1fr; }
  .automation-split::before { display: none; }
  .automation-split .automation-node { min-height: 90px; }
  .results-card { padding: 32px 20px; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric { min-height: 150px; }
  .site-footer { grid-template-columns: 1fr 1fr; padding: 55px 20px 25px; }
  .site-footer > div:not(.footer-brand):not(.footer-bottom) a {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding: 5px 0;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { flex-direction: column; gap: 8px; }
  .app-topbar { padding: 0 12px; }
  .app-search kbd,
  .icon-button { display: none; }
  .app-topbar .button { width: 41px; padding: 0; font-size: 0; }
  .app-topbar .button span { font-size: 16px; }
  .app-main { padding: 22px 13px 45px; }
  .view-header { flex-direction: column; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-card { min-height: 110px; padding: 15px; }
  .stat-card > strong { font-size: 25px; }
  .contact-row { grid-template-columns: 2fr 1fr 30px; }
  .contact-row > :nth-child(2),
  .contact-row > :nth-child(4),
  .contact-row > :nth-child(5) { display: none; }
  .contact-table-head { grid-template-columns: 2fr 1fr 30px; }
  .contact-table-head > :nth-child(2),
  .contact-table-head > :nth-child(4),
  .contact-table-head > :nth-child(5) { display: none; }
  .contact-table .contact-row { grid-template-columns: 2fr 1fr 30px; }
  .contacts-toolbar { flex-wrap: wrap; }
  .contacts-toolbar label { max-width: none; flex-basis: 100%; }
  .event-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-menu { display: none; }
  .modal-footer { align-items: stretch; flex-direction: column; }
  .modal-footer > div { width: 100%; }
  .modal-footer .button { flex: 1; }
  .form-grid,
  .form-grid--three { grid-template-columns: 1fr; }
  .span-two { grid-column: auto; }
  .contact-drawer { width: 100vw; }
  .auth-panel { padding:70px 25px 35px; }
  .campaign-summary { grid-template-columns:1fr 1fr; }
  .campaign-row { grid-template-columns:1.5fr .8fr 30px; }
  .campaign-row > :nth-child(2),.campaign-row > :nth-child(4),.campaign-row > :nth-child(5) { display:none; }
  .campaign-modal .modal-footer { align-items:stretch; }
  .campaign-modal .modal-footer > div { flex-wrap:wrap; }
}

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

/* Self-service marketing */
.demo-section { background: #eef0ea; }
.demo-video-shell { overflow:hidden; max-width:560px; margin:48px auto 0; background:var(--ink); border-radius:26px; box-shadow:0 34px 90px rgba(13,25,34,.2); }
.demo-video-frame { position:relative; overflow:hidden; background:#0b151d; }
.demo-video-shell video { display:block; width:100%; max-height:78vh; background:#0b151d; object-fit:contain; }
.demo-video-shell video::cue { color:#fff; background:rgba(7,21,33,.82); font-size:60%; line-height:1.35; }
.demo-motion-copy { position:absolute; z-index:2; right:20px; bottom:72px; left:20px; display:grid; gap:7px; padding:16px 18px 17px; color:white; background:linear-gradient(135deg,rgba(7,21,33,.94),rgba(21,35,48,.86)); border:1px solid rgba(255,255,255,.15); border-radius:16px; box-shadow:0 18px 45px rgba(0,0,0,.32); opacity:0; pointer-events:none; transform:translateY(22px) scale(.97); transition:opacity .38s ease,transform .58s cubic-bezier(.16,1,.3,1); backdrop-filter:blur(14px); }
.demo-motion-copy::after { position:absolute; content:""; inset:-1px; border-radius:inherit; background:linear-gradient(115deg,rgba(220,255,104,.22),transparent 36%,rgba(86,72,255,.24)); opacity:.5; pointer-events:none; }
.demo-motion-copy > * { position:relative; z-index:1; }
.demo-motion-copy span { color:var(--lime); font-size:9px; font-weight:900; letter-spacing:.18em; }
.demo-motion-copy strong { max-width:460px; font-size:clamp(18px,4vw,28px); line-height:1.08; letter-spacing:-.035em; }
.demo-motion-copy i { display:block; width:0; height:3px; margin-top:3px; background:linear-gradient(90deg,var(--lime),#8f76ff); border-radius:999px; }
.demo-motion-copy.is-visible { opacity:1; transform:translateY(0) scale(1); }
.demo-motion-copy.is-visible i { animation:demo-motion-line 4.3s linear both; }
@keyframes demo-motion-line { from { width:0; } to { width:100%; } }
.demo-seek-controls { display:grid; grid-template-columns:34px minmax(0,1fr) 34px; gap:10px; align-items:center; padding:13px 18px 4px; color:rgba(255,255,255,.78); font-size:11px; font-variant-numeric:tabular-nums; }
.demo-seek-controls input[type="range"] { width:100%; height:24px; margin:0; accent-color:var(--lime); cursor:pointer; touch-action:none; }
.demo-seek-controls input[type="range"]:focus-visible { outline:2px solid var(--lime); outline-offset:3px; border-radius:999px; }
.demo-seek-controls time:last-child { text-align:right; }
.demo-video-shell figcaption { display:flex; justify-content:center; gap:9px; padding:15px 20px; color:rgba(255,255,255,.72); font-size:11px; letter-spacing:.02em; text-align:center; }
.demo-video-shell figcaption span { color:var(--lime); font-weight:850; text-transform:uppercase; }
.demo-shell { overflow: hidden; max-width: 1120px; margin: 48px auto 0; background: var(--ink); border-radius: 26px; box-shadow: var(--shadow); }
.demo-steps { display: grid; grid-template-columns: repeat(3,1fr); padding: 9px; border-bottom: 1px solid rgba(255,255,255,.1); }
.demo-steps button { display:flex; align-items:center; justify-content:center; gap:10px; min-height:52px; color:rgba(255,255,255,.5); background:transparent; border:0; border-radius:10px; cursor:pointer; font-weight:750; }
.demo-steps button span { display:grid; place-items:center; width:24px; height:24px; border:1px solid rgba(255,255,255,.2); border-radius:50%; font-size:8px; }
.demo-steps button.active { color:white; background:rgba(255,255,255,.08); }
.demo-steps button.active span { color:var(--ink); background:var(--lime); border-color:var(--lime); }
.demo-stage { display:grid; grid-template-columns:.8fr 1.2fr; gap:70px; align-items:center; min-height:480px; padding:60px 8%; color:white; background:radial-gradient(circle at 20% 30%,rgba(40,105,244,.2),transparent 33%); }
.demo-phone { display:flex; flex-direction:column; justify-content:center; width:min(100%,310px); min-height:330px; margin:auto; padding:30px; color:var(--ink); background:white; border:8px solid #21323d; border-radius:35px; box-shadow:0 30px 90px rgba(0,0,0,.35); }
.demo-camera { position:relative; display:grid; place-items:center; height:160px; margin-bottom:23px; color:white; background:linear-gradient(145deg,#40525d,#0b1a24); border-radius:16px; font-size:44px; }
.demo-camera i { position:absolute; inset:18px; border:1px solid var(--lime); border-radius:10px; }
.demo-phone strong { font-size:18px; }
.demo-phone small { margin-top:7px; color:#768085; }
.demo-phone--note,.demo-phone--flow { gap:18px; min-height:270px; }
.demo-phone--note > small,.demo-phone--flow > small { color:var(--blue); font-size:9px; font-weight:850; letter-spacing:.14em; }
.demo-phone--note span,.demo-phone--flow span { padding:12px; background:#f1f3ef; border-radius:9px; font-size:12px; }
.demo-detail { max-width:520px; }
.demo-detail > span { color:var(--lime); font-size:10px; font-weight:850; letter-spacing:.15em; }
.demo-detail h3 { margin:12px 0 18px; font-size:clamp(32px,4vw,52px); line-height:1.02; letter-spacing:-.05em; }
.demo-detail p { color:rgba(255,255,255,.62); font-size:15px; line-height:1.7; }
.demo-detail ul { display:grid; gap:10px; margin:24px 0 0; padding:0; list-style:none; color:rgba(255,255,255,.8); font-size:13px; }

.pricing-section { background:var(--paper); }
.billing-toggle { display:inline-flex; gap:4px; margin-top:30px; padding:4px; background:#e5e8e1; border-radius:999px; }
.billing-toggle button { min-height:39px; padding:0 17px; color:#6f787c; background:transparent; border:0; border-radius:999px; cursor:pointer; font-size:11px; font-weight:750; }
.billing-toggle button.active { color:white; background:var(--ink); }
.billing-toggle span { margin-left:4px; color:#61751c; background:var(--lime); padding:3px 6px; border-radius:999px; font-size:7px; }
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:1120px; margin:55px auto 0; }
.price-card { position:relative; display:flex; flex-direction:column; min-height:470px; padding:34px; background:white; border:1px solid #dfe3dc; border-radius:20px; }
.price-card--featured { color:white; background:var(--ink); border-color:var(--ink); transform:translateY(-12px); box-shadow:var(--shadow); }
.price-label { color:var(--blue); font-size:10px; font-weight:850; letter-spacing:.16em; }
.price-card--featured .price-label { color:var(--lime); }
.price-badge { position:absolute; top:18px; right:18px; padding:6px 8px; color:var(--ink); background:var(--lime); border-radius:999px; font-size:7px; font-weight:850; }
.price-card h3 { margin:16px 0 30px; font-size:20px; }
.price { display:flex; align-items:baseline; gap:7px; }
.price strong { font-size:43px; letter-spacing:-.06em; }
.price small { color:#879093; font-size:10px; }
.price-card ul { display:grid; gap:13px; margin:30px 0 34px; padding:24px 0 0; border-top:1px solid rgba(127,137,140,.22); list-style:none; font-size:12px; }
.price-card li::before { content:"✓"; margin-right:9px; color:#38845b; font-weight:900; }
.price-card .button { width:100%; margin-top:auto; }
.faq-section { background:white; }
.faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:1050px; margin:45px auto 0; }
.faq-grid details { padding:22px 24px; background:#f4f5f1; border-radius:14px; }
.faq-grid details:not([open]) { display:flex; align-items:center; }
.faq-grid summary { display:flex; align-items:center; gap:14px; cursor:pointer; font-size:14px; font-weight:800; list-style:none; }
.faq-grid summary::-webkit-details-marker { display:none; }
.faq-grid summary::before { content:"▶"; display:grid; flex:0 0 16px; place-items:center; width:16px; height:16px; font-size:12px; line-height:1; transition:transform .18s ease; }
.faq-grid details[open] summary::before { transform:rotate(90deg); }
.faq-grid p { margin:15px 0 0; color:#6f797d; font-size:12px; line-height:1.65; }

/* Public resource and legal pages */
.public-page { min-height:100vh; color:var(--ink); background:#f5f6f2; }
.public-page[aria-hidden="true"] { display:none; }
.public-page > header { position:sticky; z-index:5; top:0; display:flex; justify-content:space-between; align-items:center; min-height:74px; padding:0 5vw; background:rgba(255,255,255,.92); border-bottom:1px solid #e1e4df; backdrop-filter:blur(14px); }
.public-page > header button { display:grid; place-items:center; width:36px; height:36px; background:#edf0ea; border:0; border-radius:50%; font-size:22px; cursor:pointer; }
.public-page > main { width:min(900px,calc(100% - 40px)); margin:auto; padding:80px 0 120px; }
.legal-article { padding:clamp(28px,5vw,70px); background:white; border:1px solid #e1e4df; border-radius:24px; box-shadow:0 15px 60px rgba(7,21,33,.06); }
.legal-document-nav { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 42px; padding:8px; background:#f0f2ed; border:1px solid #e0e4dd; border-radius:14px; }
.legal-document-nav a { display:flex; align-items:center; min-height:38px; padding:9px 13px; color:#59656b; border-radius:9px; text-decoration:none; font-size:11px; font-weight:800; }
.legal-document-nav a:hover,.legal-document-nav a:focus-visible { color:var(--ink); background:white; outline:2px solid transparent; }
.legal-document-nav a.active { color:white; background:var(--ink); }
.legal-kicker { color:var(--blue); font-size:10px; font-weight:850; letter-spacing:.16em; }
.legal-article h1 { margin:12px 0 35px; font-size:clamp(42px,7vw,68px); letter-spacing:-.06em; overflow-wrap:anywhere; }
.legal-article h2 { margin:38px 0 11px; font-size:19px; }
.legal-article p,.legal-article li { color:#5f6a70; font-size:14px; line-height:1.75; }
.legal-article a { color:var(--blue); text-decoration:underline; }
.legal-lead { max-width:680px; margin-top:-20px; font-size:17px!important; }
.legal-notice { margin-bottom:30px; padding:17px; color:#8c4a13; background:#fff1d6; border:1px solid #f0d49e; border-radius:10px; font-size:12px; line-height:1.55; }
.legal-archive-notice { margin-bottom:30px; padding:17px; color:#31517e; background:#eef3ff; border:1px solid #cbd9fa; border-radius:10px; font-size:12px; line-height:1.55; }
.legal-version { margin:24px 0 34px!important; padding:14px 16px; background:#f3f5f0; border-radius:10px; font-size:11px!important; }
.legal-version code { overflow-wrap:anywhere; color:#667176; font-size:9px; }
.help-grid,.legal-columns { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:35px; }
.help-grid article,.legal-columns section { padding:23px; background:#f3f5f0; border-radius:13px; }
.help-grid b { color:var(--blue); font-size:10px; }
.help-grid h2,.legal-columns h2 { margin:10px 0!important; }
.support-box { margin-top:30px; padding:28px; color:white; background:var(--ink); border-radius:15px; }
.support-box h2 { margin-top:0; }
.support-box p { color:rgba(255,255,255,.65); }
.status-card { display:flex; gap:16px; align-items:center; margin:20px 0 45px; padding:25px; background:#eff9d0; border-radius:15px; }
.status-card i { width:14px; height:14px; background:#3b9b64; border-radius:50%; box-shadow:0 0 0 7px rgba(59,155,100,.15); }
.status-card div { display:flex; flex-direction:column; }
.status-card p { margin:5px 0 0; }
.status-list { border:1px solid #e1e4df; border-radius:12px; overflow:hidden; }
.status-list p { display:flex; justify-content:space-between; gap:20px; margin:0; padding:15px 18px; border-bottom:1px solid #e8ebe6; }
.status-list p:last-child { border-bottom:0; }
.status-list b { color:#43815b; font-size:12px; }
.legal-loading { min-height:50vh; display:grid; place-items:center; color:#7e878b; }
.intent-page { overflow:hidden; padding:0; }
.intent-hero { padding:clamp(42px,7vw,90px); color:white; background:radial-gradient(circle at 85% 20%,rgba(121,255,103,.2),transparent 24%),var(--ink); }
.intent-hero .legal-kicker { color:var(--lime); }
.intent-hero h1 { max-width:900px; margin-bottom:28px; }
.intent-hero .legal-lead { color:rgba(255,255,255,.7); }
.intent-hero .button { margin-top:20px; }
.intent-hero > small { display:block; margin-top:14px; color:rgba(255,255,255,.48); }
.intent-proof-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#dfe3de; }
.intent-proof-grid article { min-height:210px; padding:38px; background:white; }
.intent-proof-grid b,.intent-process > span,.intent-cta span { color:var(--blue); font-size:10px; font-weight:850; letter-spacing:.14em; }
.intent-proof-grid h2 { margin-top:28px; font-size:23px; line-height:1.2; }
.intent-process { max-width:850px; padding:70px clamp(32px,7vw,90px); }
.intent-process h2 { margin:18px 0 12px; font-size:clamp(28px,5vw,46px); letter-spacing:-.04em; }
.intent-cta { display:flex; align-items:center; justify-content:space-between; gap:30px; margin:0 clamp(28px,7vw,90px) clamp(28px,7vw,90px); padding:35px; background:var(--lime); border-radius:18px; }
.intent-cta h2 { margin:8px 0; font-size:30px; }
.intent-cta p { margin:0; color:#30402f; }

@media (max-width:680px) {
  .legal-document-nav { display:grid; grid-template-columns:1fr 1fr; margin-bottom:30px; }
  .legal-document-nav a { justify-content:center; text-align:center; }
  .legal-document-nav a:last-child { grid-column:1 / -1; }
}

/* SaaS account, onboarding and offline */
.account-banner { display:flex; justify-content:space-between; align-items:center; min-height:42px; padding:8px 24px; color:#344208; background:var(--lime); font-size:10px; }
.account-banner button { padding:6px 10px; color:white; background:var(--ink); border:0; border-radius:6px; cursor:pointer; font-size:8px; font-weight:800; }
.account-banner--danger { color:#7b2f27; background:#ffe0da; }
.onboarding-card { display:grid; grid-template-columns:260px 1fr; gap:30px; align-items:center; margin-bottom:19px; padding:22px; color:white; background:linear-gradient(135deg,var(--ink),#143548); border-radius:15px; }
.onboarding-card > div > span { color:var(--lime); font-size:8px; font-weight:850; letter-spacing:.14em; }
.onboarding-card h2 { margin:7px 0 5px; font-size:19px; }
.onboarding-card p { margin:0; color:rgba(255,255,255,.55); font-size:9px; }
.onboarding-steps { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.onboarding-steps button { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-height:74px; padding:10px; color:rgba(255,255,255,.7); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); border-radius:8px; text-align:left; cursor:pointer; font-size:7px; }
.onboarding-steps i { display:grid; place-items:center; width:18px; height:18px; background:rgba(255,255,255,.13); border-radius:50%; font-style:normal; }
.onboarding-steps button.done { color:rgba(255,255,255,.45); }
.onboarding-steps button.done i { color:var(--ink); background:var(--lime); }
.subscription-head { display:flex; justify-content:space-between; align-items:flex-start; padding-bottom:20px; }
.subscription-head span:first-child { color:var(--blue); font-size:8px; font-weight:850; letter-spacing:.14em; }
.subscription-head h2 { margin:7px 0 3px; font-size:28px; }
.subscription-head p { margin:0; color:#828b8e; font-size:9px; }
.subscription-status { padding:6px 9px; border-radius:999px; font-size:8px; font-weight:800; }
.subscription-status.active { color:#267148; background:#e0f2e7; }
.subscription-status.locked { color:#9a4137; background:#ffe4df; }
.usage-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; }
.usage-row { padding:13px; background:#f4f6f2; border-radius:9px; }
.usage-row > span { display:flex; justify-content:space-between; color:#778185; font-size:8px; }
.usage-row b { color:var(--ink); }
.usage-row > i { display:block; height:5px; margin-top:10px; overflow:hidden; background:#dfe3dc; border-radius:999px; }
.usage-row em { display:block; height:100%; background:var(--blue); border-radius:999px; }
.plan-picker { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.plan-picker article { padding:13px; border:1px solid #dfe3dd; border-radius:9px; }
.plan-picker article.current { background:#f0f4ff; border-color:#afc4f7; }
.plan-picker article > span { color:var(--blue); font-size:7px; font-weight:850; letter-spacing:.1em; }
.plan-picker strong { display:block; margin-top:7px; font-size:18px; }
.plan-picker small { font-size:7px; }
.plan-picker p { margin:5px 0 10px; color:#8b9396; font-size:7px; }
.seat-picker { display:grid; gap:4px; margin:8px 0 10px; color:#667176; font-size:7px; }
.seat-picker input { width:100%; min-height:30px; padding:6px 8px; color:var(--ink); background:white; border:1px solid #cfd5ce; border-radius:6px; font:inherit; }
.seat-picker small { color:#8b9396; }
.plan-picker button { width:100%; padding:7px; background:var(--ink); color:white; border:0; border-radius:6px; cursor:pointer; font-size:7px; font-weight:800; }
.plan-picker button:disabled { color:#758084; background:#dfe3de; }
.billing-period { display:flex; gap:16px; margin:0 0 12px; padding:10px 12px; background:#f4f6f2; border-radius:8px; font-size:8px; }
.billing-period label { display:flex; align-items:center; gap:6px; }
.billing-period input { accent-color:var(--blue); }
.billing-legal-consent { display:grid; grid-template-columns:16px 1fr; gap:9px; align-items:start; margin:0 0 14px; padding:11px 12px; color:#667176; background:#f7f8f5; border:1px solid #dfe3dd; border-radius:8px; font-size:8px; line-height:1.55; }
.billing-legal-consent input { width:15px; height:15px; margin:1px 0 0; accent-color:var(--blue); }
.billing-legal-consent a { color:var(--blue); text-decoration:underline; }
.settings-help { margin:8px 0 12px; color:#7d878b; font-size:8px; line-height:1.55; }
.contract-list { display:grid; gap:8px; }
.contract-card { display:grid; grid-template-columns:minmax(0,1.5fr) auto auto; gap:14px; align-items:center; padding:13px 14px; background:#f6f7f4; border:1px solid #e1e5df; border-radius:9px; }
.contract-card > div { display:flex; flex-direction:column; min-width:0; }
.contract-card strong { font-size:9px; overflow-wrap:anywhere; }
.contract-card small { margin-top:4px; color:#7f898d; font-size:7px; }
.contract-meta { gap:3px; color:#5c686e; font-size:8px; text-align:right; }
.contract-meta span:first-child { color:var(--ink); font-weight:800; }
.contract-actions { flex-direction:row!important; justify-content:flex-end; gap:6px; }
.contract-actions a,.contract-actions button { padding:6px 8px; color:#31517e; background:#e9efff; border:0; border-radius:6px; font:inherit; font-size:7px; text-decoration:none; cursor:pointer; white-space:nowrap; }
.danger-zone { margin-top:20px; color:#9a4137; }
.ocr-status { margin-top:10px; padding:10px 12px; border-radius:8px; font-size:8px; }
.ocr-status.loading { color:#315fb8; background:#eaf0ff; }
.ocr-status.success { color:#2a724c; background:#e2f3e8; }
.ocr-status.error { color:#97443a; background:#ffe8e3; }
.ocr-confirmation { display:flex; gap:9px; align-items:flex-start; margin-top:10px; padding:11px 12px; color:#163d2b; background:#edf8ef; border:1px solid #b9ddc3; border-radius:8px; font-size:9px; line-height:1.45; }
.ocr-confirmation[hidden] { display:none; }
.ocr-confirmation input { width:16px; height:16px; margin:0; accent-color:#1c8464; }
.offline-banner { position:fixed; z-index:400; right:16px; bottom:16px; max-width:380px; padding:12px 15px; color:white; background:#7c4e16; border-radius:9px; box-shadow:var(--shadow); font-size:10px; }
.offline-banner[hidden] { display:none; }
.auth-address-row { display:grid; grid-template-columns:minmax(120px,.42fr) minmax(0,1fr); gap:14px; }
@media (max-width:640px) { .auth-address-row { grid-template-columns:1fr; } }
.team-actions { display:flex; gap:6px; margin-left:auto; }
.team-actions button { padding:6px 8px; color:#31517e; background:#eef3ff; border:0; border-radius:6px; font:inherit; font-size:8px; cursor:pointer; }
.team-actions .danger-button { color:#8c3f36; background:#ffe9e5; }
.settings-row button:disabled { cursor:not-allowed; opacity:.55; }
.auth-inline-link { justify-self:end; padding:0; color:var(--blue); background:transparent; border:0; cursor:pointer; font-size:8px; }
.auth-check { display:grid!important; grid-template-columns:17px 1fr; align-items:start; }
.auth-check input { width:15px!important; min-height:15px!important; margin-top:1px; accent-color:var(--blue); }
.auth-check a { color:var(--blue); text-decoration:underline; }
.auth-dev-note { margin-top:12px!important; padding:8px; background:#fff5d9; border-radius:6px; font-size:8px!important; }

@media (max-width: 1000px) {
  .pricing-grid { grid-template-columns:1fr; max-width:620px; }
  .price-card--featured { transform:none; }
  .demo-stage { grid-template-columns:1fr; gap:38px; }
  .onboarding-card { grid-template-columns:1fr; }
  .onboarding-steps { grid-template-columns:repeat(5,1fr); }
  .site-footer { grid-template-columns:2fr repeat(2,1fr); }
}
@media (max-width: 680px) {
  .demo-video-shell { width:100%; max-width:none; margin:34px 0 0; border-radius:20px; }
  .demo-video-shell figcaption { align-items:center; flex-direction:column; gap:4px; }
  .demo-steps button { font-size:0; }
  .demo-steps button span { font-size:8px; }
  .demo-stage { padding:40px 20px; }
  .faq-grid,.help-grid,.legal-columns { grid-template-columns:1fr; }
  .pricing-section,.demo-section,.faq-section { padding-right:20px; padding-left:20px; }
  .price-card { min-height:430px; }
  .onboarding-steps { grid-template-columns:1fr 1fr; }
  .usage-grid,.plan-picker { grid-template-columns:1fr; }
  .contract-card { grid-template-columns:1fr; align-items:start; }
  .contract-meta { text-align:left; }
  .contract-actions { justify-content:flex-start; flex-wrap:wrap; }
  .account-banner { gap:8px; padding:8px 12px; }
  .account-banner span { max-width:75%; }
  .public-page > main { width:min(100% - 20px,900px); padding:20px 0 60px; }
  .legal-article { border-radius:15px; }
  .intent-proof-grid { grid-template-columns:1fr; }
  .intent-proof-grid article { min-height:150px; }
  .intent-cta { align-items:flex-start; flex-direction:column; }
  .status-list p { flex-direction:column; gap:4px; }
  .site-footer { grid-template-columns:1fr 1fr; }
}