@font-face {
  font-family: Geist;
  src: url("/docs-ui/assets/geist-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/docs-ui/assets/geist-mono-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --bg: #090d10;
  --surface: #0e1317;
  --surface-raised: #12191e;
  --text: #f1f4f5;
  --muted: #969fa5;
  --subtle: #79858d;
  --border: #263037;
  --border-soft: #1b252b;
  --mint: #b7f5e5;
  --cyan: #72ffff;
  --amber: #e8bd7b;
  --font:
    Geist, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "Geist Mono", "SFMono-Regular", Consolas, monospace;
  --container: 1200px;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 108px;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.modal-open {
  overflow: hidden;
}
button,
input {
  font: inherit;
}
button,
a {
  -webkit-tap-highlight-color: transparent;
}
button {
  color: inherit;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  border: 0;
  background: none;
}
img,
video {
  max-width: 100%;
  display: block;
}
h1,
h2,
h3,
p,
figure {
  margin: 0;
}
h1,
h2,
h3 {
  font-weight: 450;
  line-height: 1.15;
  letter-spacing: -0.045em;
}
button:disabled {
  cursor: wait;
}
::selection {
  background: #b7f5e5;
  color: #090d10;
}
:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 5px;
  border-radius: 3px;
}
[hidden] {
  display: none !important;
}
.svg-library {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}
.icon {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
  vertical-align: middle;
}
.container {
  width: calc(100% - 96px);
  max-width: var(--container);
  margin-inline: auto;
}
.mono-label,
.eyebrow,
.feature-index,
.plan-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.075em;
  font-weight: 400;
  line-height: 1.6;
}
.eyebrow {
  display: block;
  color: #9faeaf;
  font-size: 10px;
  letter-spacing: 0.12em;
  margin-bottom: 23px;
}
.status-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mint);
  flex-shrink: 0;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 21px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 550;
  line-height: 1.3;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.2s,
    color 0.2s;
  white-space: nowrap;
}
.button:hover {
  transform: translateY(-2px);
}
.button:active {
  transform: translateY(0);
}
.button .icon {
  width: 17px;
  height: 17px;
}
.button-mint {
  background: var(--mint);
  color: #10231e;
  border-color: var(--mint);
}
.button-mint:hover {
  background: #d4fff2;
  border-color: #d4fff2;
}
.button-light {
  background: #e9eef0;
  color: #131a1e;
}
.button-light:hover {
  background: #fff;
}
.button-outline {
  background: transparent;
  border-color: #3b464e;
  color: var(--text);
}
.button-outline:hover {
  background: #172025;
  border-color: #73838b;
}
.button-quiet {
  background: transparent;
  color: #d8dedf;
  gap: 9px;
}
.button-quiet:hover {
  background: #ffffff06;
}
.button-small {
  min-height: 37px;
  padding: 8px 14px;
  font-size: 12px;
}
.button-separator {
  height: 12px;
  width: 1px;
  background: #193f363f;
  margin-inline: 1px;
}
.arrow-end {
  margin-left: 6px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.6;
  transition: color 0.2s;
}
.text-link:hover {
  color: var(--mint);
}
.text-link .icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s;
}
.text-link:hover .icon {
  transform: translateX(3px);
}
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 5px;
  flex-shrink: 0;
  transition:
    background 0.2s,
    color 0.2s;
  color: var(--muted);
}
.icon-button:hover {
  background: #ffffff0b;
  color: var(--text);
}
.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 15px;
  padding: 10px 20px;
  background: var(--mint);
  color: var(--bg);
  transform: translateY(-160%);
}
.skip-link:focus {
  transform: translateY(0);
}

/* Navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 80px;
  border-bottom: 1px solid #ffffff05;
  background: #090d10ed;
  backdrop-filter: blur(18px);
  transition: border-color 0.2s;
}
.site-header.scrolled {
  border-bottom-color: var(--border-soft);
}
.nav-shell {
  max-width: 1280px;
  width: calc(100% - 80px);
  height: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.065em;
  white-space: nowrap;
  line-height: 1;
}
.brand img {
  width: 30px;
  height: 30px;
}
.brand-dot {
  color: var(--mint);
}
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 33px;
  margin-left: 63px;
}
.desktop-nav > a,
.nav-signin {
  font-size: 13px;
  color: #a6afb4;
  transition: color 0.2s;
}
.desktop-nav > a:hover,
.nav-signin:hover {
  color: var(--text);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 26px;
}
.menu-toggle {
  display: none;
}
.mobile-menu {
  position: absolute;
  top: 79px;
  left: 0;
  width: 100%;
  padding: 16px 24px 24px;
  background: #0d1418;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 22px 40px #0006;
}
.mobile-menu > a:not(.button) {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-soft);
  font-size: 16px;
}
.mobile-menu > .button {
  margin-top: 22px;
  display: flex;
}

/* Hero and the interactive product */
.hero {
  position: relative;
  padding-top: 53px;
  isolation: isolate;
}
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background-image:
    linear-gradient(
      90deg,
      transparent calc(50% - 601px),
      #28353a35 calc(50% - 600px),
      transparent calc(50% - 599px)
    ),
    linear-gradient(
      90deg,
      transparent calc(50% + 599px),
      #28353a35 calc(50% + 600px),
      transparent calc(50% + 601px)
    );
  mask-image: linear-gradient(#000, transparent 75%);
}
.hero-grid::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 105px;
  width: 1400px;
  height: 680px;
  transform: translateX(-50%);
  opacity: 0.18;
  background-image: radial-gradient(#648477 1px, transparent 1px);
  background-size: 14px 14px;
  mask-image: radial-gradient(
    ellipse at 50% 82%,
    transparent 40%,
    #000 64%,
    transparent 76%
  );
}
.hero-copy {
  text-align: center;
  position: relative;
}
.announcement {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #2a373a;
  border-radius: 50px;
  padding: 5px 10px 5px 11px;
  font-size: 10px;
  line-height: 20px;
  color: #c1ccce;
  background: #10181bb3;
  transition: border-color 0.2s;
}
.announcement:hover {
  border-color: #84b6ab;
}
.announcement .icon {
  width: 13px;
  height: 13px;
  margin-left: 5px;
  color: #a4bcb4;
}
.hero h1 {
  font-size: clamp(55px, 5.55vw, 80px);
  line-height: 1.06;
  font-weight: 420;
  letter-spacing: -0.065em;
  margin-top: 28px;
  margin-bottom: 25px;
}
.hero h1 > span {
  color: var(--mint);
}
.hero-description {
  font-size: 17px;
  line-height: 1.65;
  color: #a3aeb5;
  letter-spacing: -0.018em;
}
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 28px;
}
.hero-actions > .button {
  min-height: 48px;
}
.duration {
  font-family: var(--mono);
  font-size: 10px;
  color: #9aa5ac;
  border: 1px solid #2c363e;
  border-radius: 3px;
  padding: 2px 4px;
  margin-left: 1px;
}
.play-small {
  display: grid;
  place-items: center;
  border: 1px solid #3a464d;
  width: 23px;
  height: 23px;
  border-radius: 50%;
}
.play-small .icon {
  width: 14px;
  height: 14px;
  transform: translateX(-1px);
}
.hero-assurance {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 18px;
  font-size: 10px;
  color: #8c9a9f;
}
.hero-assurance > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.hero-assurance .icon {
  width: 12px;
  height: 12px;
  color: #9da9ae;
}
.playground-wrap {
  margin-top: 60px;
  position: relative;
}
.demo-caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.07em;
  color: #9caaaf;
  margin-bottom: 13px;
  padding-inline: 2px;
}
.demo-caption > span {
  display: flex;
  gap: 8px;
  align-items: center;
}
.demo-caption > span:last-child {
  font-family: var(--font);
  letter-spacing: 0;
  font-size: 11px;
  color: #a7b4b7;
}
.demo-caption .icon {
  width: 12px;
  height: 12px;
}
.playground {
  border: 1px solid #35413f;
  border-radius: 9px;
  overflow: hidden;
  background: #101619;
  box-shadow:
    0 24px 80px -50px #86cab72e,
    0 3px 14px #0004;
}
.playground-toolbar {
  height: 46px;
  display: flex;
  align-items: center;
  padding: 0 19px;
  gap: 14px;
  background: #151c20;
  border-bottom: 1px solid #293238;
}
.window-dots {
  display: flex;
  gap: 5px;
}
.window-dots i {
  display: block;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  background: #566067;
}
.window-dots i:first-child {
  background: #776365;
}
.window-dots i:nth-child(2) {
  background: #7c7561;
}
.window-dots i:nth-child(3) {
  background: #61756c;
}
.toolbar-title {
  font-size: 11px;
  color: #a5b0b5;
  margin-left: 4px;
}
.demo-label {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.07em;
  color: #8e9ca2;
}
.reset-demo {
  width: 26px;
  height: 26px;
  margin-right: -6px;
}
.reset-demo .icon {
  width: 13px;
  height: 13px;
}
.playground-body {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
}
.prompt-pane {
  min-width: 0;
  background: #0d1317;
  display: flex;
  flex-direction: column;
  padding: 24px 27px 0;
}
.prompt-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #8c9b9f;
}
.prompt-heading > .icon {
  width: 16px;
  height: 16px;
  color: #718087;
}
.prompt-heading .mono-label {
  font-size: 9px;
  letter-spacing: 0.08em;
}
.example-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #090e12;
  border: 1px solid #222d33;
  border-radius: 5px;
  width: max-content;
  max-width: 100%;
  margin-top: 19px;
  margin-bottom: 25px;
}
.example-tabs button {
  font-size: 10px;
  padding: 5px 13px;
  min-height: 29px;
  border-radius: 3px;
  color: #929ea6;
  transition:
    background 0.2s,
    color 0.2s;
}
.example-tabs button[aria-selected="true"] {
  background: #273236;
  color: #e0e7e6;
  box-shadow: 0 1px 3px #0004;
}
.example-tabs button:hover {
  color: #fff;
}
.code-editor {
  margin-inline: -7px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 2.25;
  overflow-x: auto;
  padding: 0 7px 20px;
  min-height: 225px;
  scrollbar-width: thin;
  scrollbar-color: #3a4649 transparent;
}
.code-line {
  display: flex;
  align-items: baseline;
  min-height: 27px;
  white-space: pre;
}
.code-line code {
  font-family: inherit;
  font-size: inherit;
  color: #c1cbd1;
}
.line-number {
  display: inline-block;
  width: 30px;
  flex: 0 0 30px;
  font-size: 10px;
  color: #53646e;
  user-select: none;
}
.code-purple {
  color: #bdaacb;
}
.secret-value {
  background: #d0a86012;
  outline: 1px solid #9f794653;
  color: var(--amber);
  border-radius: 3px;
  padding: 3px 5px;
  margin-left: -5px;
  transition:
    color 0.3s,
    background 0.3s,
    outline-color 0.3s;
}
.secret-value.protected {
  color: var(--mint);
  background: #8bcdb713;
  outline-color: #72948755;
}
.prompt-foot {
  display: flex;
  align-items: center;
  gap: 6px;
  border-top: 1px solid #202a30;
  margin-top: auto;
  min-height: 44px;
  color: #86949c;
  font-size: 9px;
}
.prompt-foot > .icon {
  width: 11px;
  height: 11px;
}
.prompt-foot-state {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #93a099;
}
.small-cursor {
  height: 7px;
  width: 7px;
  border: 1px solid #6d7d80;
  border-radius: 2px;
}
.guard-pane {
  background: linear-gradient(130deg, #182221, #121a1c 65%);
  border-left: 1px solid #2b3638;
  padding: 23px 29px 17px;
  display: flex;
  flex-direction: column;
}
.guard-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 550;
  letter-spacing: -0.03em;
}
.guard-brand img {
  width: 23px;
  height: 23px;
}
.local-chip {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0;
  color: #a8c4b8;
  background: #9bf2bd07;
  border: 1px solid #789e863b;
  border-radius: 4px;
  padding: 3px 6px;
  font-weight: 400;
}
.local-chip .status-dot {
  width: 4px;
  height: 4px;
  background: #93cbae;
}
.guard-content {
  position: relative;
  margin-top: 24px;
}
.verdict-icon {
  width: 35px;
  height: 35px;
  border: 1px solid #637a6c68;
  background: #a7d9bc0b;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mint);
  margin-bottom: 14px;
}
.verdict-icon > .icon {
  width: 20px;
  height: 20px;
}
.guard-eyebrow {
  display: block;
  color: #9fb4a9;
  font-size: 8px;
  letter-spacing: 0.11em;
  margin-bottom: 7px;
}
.guard-title {
  font-size: 23px;
  letter-spacing: -0.04em;
  font-weight: 450;
  line-height: 1.3;
  margin-bottom: 9px;
}
.guard-description {
  font-size: 11px;
  color: #a3b0b1;
  line-height: 1.8;
  min-height: 40px;
}
.detected-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block: 19px 17px;
  border: 1px solid #384540;
  background: #0e1717;
  padding: 9px 10px;
  border-radius: 4px;
  font-size: 10px;
  color: #bacbc4;
}
.detected-item > .icon {
  width: 12px;
  height: 12px;
  color: #d0bf99;
}
.detected-line {
  margin-left: auto;
  color: #8a9b96;
  font-family: var(--mono);
  font-size: 8px;
}
.protect-button {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px;
  font-size: 11px;
  justify-content: space-between;
  border-radius: 4px;
  margin-top: auto;
}
.protect-button > .icon {
  width: 15px;
  height: 15px;
}
.guard-note {
  font-size: 9px;
  text-align: center;
  margin-top: 8px;
  color: #9aaea4;
}
.demo-progress {
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  border-top: 1px solid #273432;
  background: #111a1b;
}
.demo-progress > span:not(.progress-line) {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  color: #899c99;
}
.demo-progress i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 8px;
  color: #718e83;
}
.demo-progress .active {
  color: #d9e8df !important;
}
.demo-progress .complete {
  color: #a9bcb3 !important;
}
.progress-line {
  height: 1px;
  width: 55px;
  background: #34483d;
  position: relative;
}
.progress-line::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  width: 4px;
  height: 4px;
  border-top: 1px solid #34483d;
  border-right: 1px solid #34483d;
  transform: rotate(45deg);
}
.playground[data-state="protected"] .guard-title {
  color: var(--mint);
}
.playground[data-state="protected"] .verdict-icon {
  background: #b7f5e512;
  border-color: #668f78;
}
.playground[data-state="protected"] .detected-item .icon {
  color: var(--mint);
}
.playground[data-state="protected"] .protect-step {
  color: var(--mint) !important;
}
.playground[data-state="protected"] .small-cursor {
  background: var(--mint);
  border-color: var(--mint);
}
.hero-proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 23px;
  font-size: 10px;
  color: #9ba8ad;
}
.hero-proof > a {
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s;
}
.hero-proof > a:hover {
  color: var(--text);
}
.hero-proof strong {
  color: #e1e8e7;
  font-weight: 500;
}
.hero-proof .icon {
  width: 12px;
  height: 12px;
}
.hero-proof-divider {
  height: 12px;
  width: 1px;
  background: #354047;
}
.stars {
  font-size: 10px;
  color: #b7d8c8;
  letter-spacing: 2px;
}
.integrations {
  padding-block: 69px 65px;
  text-align: center;
  border-bottom: 1px solid var(--border-soft);
}
.integrations > .mono-label {
  font-size: 8px;
  color: #859299;
  letter-spacing: 0.15em;
}
.platforms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 65px;
  margin-top: 24px;
  color: #a8b3b9;
}
.platforms > span {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 21px;
  font-weight: 550;
  letter-spacing: -0.06em;
  white-space: nowrap;
}
.platforms .icon {
  height: 22px;
  width: 22px;
}
.platforms .platform-claude {
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.05em;
}
.platform-claude > span {
  font-family: var(--font);
  font-size: 26px;
  font-weight: 400;
}
.platforms .platform-slack {
  font-size: 24px;
  font-weight: 650;
}
.platform-slack > span {
  font-size: 31px;
  font-weight: 500;
  line-height: 1;
}
.platform-notion > span {
  font-family: Georgia, serif;
  border: 1.5px solid currentColor;
  font-size: 17px;
  line-height: 20px;
  width: 21px;
  height: 22px;
  border-radius: 2px;
  text-align: center;
  margin-right: 2px;
}
.platform-gmail > span {
  font-weight: 650;
  font-size: 23px;
  line-height: 1;
  margin-right: 2px;
}
.platform-flower {
  font-size: 27px;
  line-height: 1;
}
.integrations-note {
  font-size: 10px;
  color: #77888f;
  margin-top: 18px;
}

/* A readable product story */
.section {
  padding-block: 98px;
}
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 35px;
  margin-bottom: 48px;
}
.section-heading h2,
.faq-heading h2 {
  font-size: 46px;
  line-height: 1.15;
  font-weight: 430;
  letter-spacing: -0.055em;
}
.section-heading h2 span,
.faq-heading h2 span {
  color: #839198;
}
.section-heading > p {
  color: #9aa6ac;
  font-size: 13px;
  line-height: 1.9;
  max-width: 375px;
  padding-bottom: 3px;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}
.feature {
  min-width: 0;
}
.feature-visual {
  height: 224px;
  border: 1px solid #2c383d;
  border-radius: 6px;
  background: #10171b;
  overflow: hidden;
  position: relative;
  font-family: var(--mono);
  font-size: 10px;
  color: #9aadb5;
  margin-bottom: 27px;
  transition: border-color 0.25s;
}
.feature:hover .feature-visual {
  border-color: #576f69;
}
.visual-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  padding: 0 16px;
  border-bottom: 1px solid #263138;
  font-size: 9px;
  color: #9dadb3;
  background: #141c20;
}
.visual-topline > .icon {
  width: 12px;
  height: 12px;
  color: #9db7a9;
}
.mini-badge {
  color: #c0b593;
  font-size: 7px;
  border: 1px solid #746a485e;
  padding: 2px 5px;
  line-height: 1.4;
  border-radius: 3px;
}
.scan-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 17px 14px;
  font-size: 9px;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.scan-highlight {
  margin-left: -14px;
  padding: 6px 12px;
  background: #c0a4640b;
  border-top: 1px solid #b7a36130;
  border-bottom: 1px solid #b7a36130;
  color: #cabd9d;
  display: flex;
  align-items: center;
  gap: 5px;
}
.scan-highlight b {
  font-weight: 400;
  color: #c9d6ce;
}
.scan-dot {
  height: 4px;
  width: 4px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #c2a66e;
  margin-right: 2px;
}
.scan-result {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 8px 14px;
  background: #101b18;
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 8px;
  color: #adc6b8;
  border-top: 1px solid #2e413a;
}
.scan-result > .icon {
  height: 12px;
  width: 12px;
}
.redact-message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  margin: 18px 20px;
  font-size: 9px;
  color: #a1afb5;
}
.redact-before {
  font-size: 11px;
  text-decoration: line-through;
  color: #c2a892;
  text-decoration-color: #896f59;
  line-height: 1.4;
}
.redact-arrow {
  position: absolute;
  right: 33px;
  top: 107px;
  color: #6c8078;
  transform: rotate(90deg);
}
.redact-after {
  font-size: 12px;
  color: #b7e2cc;
  background: #9fc9b013;
  border: 1px solid #5b826a60;
  border-radius: 3px;
  padding: 4px 8px;
}
.vault-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 16px;
  padding: 15px 0;
  border-bottom: 1px solid #263239;
  font-size: 10px;
  color: #a9c9b8;
}
.vault-row > span:nth-child(2) {
  color: #7d9296;
  letter-spacing: 2px;
}
.vault-row > .icon {
  height: 11px;
  width: 11px;
  color: #859f91;
}
.vault-restore {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 9px;
  margin: 14px 16px 7px;
  color: #b7c9bf;
}
.vault-restore .icon {
  height: 11px;
  width: 11px;
}
.vault-restore .icon:last-child {
  margin-left: auto;
  color: #a1c4ac;
}
.vault-local {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  color: #849990;
  font-size: 7px;
}
.vault-local .status-dot {
  height: 3px;
  width: 3px;
}
.feature-index {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 8px;
  letter-spacing: 0.1em;
  color: #8e9d9e;
  margin-bottom: 10px;
}
.pro-label {
  font-family: var(--font);
  font-size: 7px;
  letter-spacing: 0.02em;
  padding: 1px 4px;
  border: 1px solid #41655570;
  border-radius: 3px;
  color: #a9cbbb;
}
.feature h3 {
  font-size: 19px;
  letter-spacing: -0.035em;
  margin-bottom: 11px;
  font-weight: 450;
}
.feature > p {
  font-size: 12px;
  line-height: 1.9;
  color: #9aa7af;
  padding-right: 11px;
}
.video-feature {
  margin-top: 71px;
  border: 1px solid #2a353c;
  background: linear-gradient(110deg, #151e22, #101619);
  display: grid;
  grid-template-columns: 0.94fr 1.06fr;
  border-radius: 7px;
  overflow: hidden;
}
.video-preview {
  position: relative;
  overflow: hidden;
  min-width: 0;
  padding: 0;
  isolation: isolate;
  border-right: 1px solid #2a353c;
}
.video-preview > img {
  width: 100%;
  height: 100%;
  min-height: 255px;
  object-fit: cover;
  opacity: 0.56;
  transition:
    opacity 0.3s,
    transform 0.5s;
}
.video-preview:hover > img {
  opacity: 0.8;
  transform: scale(1.025);
}
.video-preview-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, #02090850);
  pointer-events: none;
}
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 51px;
  width: 51px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid #d9f8eb8f;
  background: #d3f6e910;
  color: #e3f8ee;
  backdrop-filter: blur(10px);
  transition: background 0.2s;
}
.video-play > .icon {
  height: 23px;
  width: 23px;
}
.video-preview:hover .video-play {
  background: #a5c9b931;
}
.video-duration {
  position: absolute;
  bottom: 18px;
  right: 19px;
  font-family: var(--mono);
  font-size: 9px;
  border: 1px solid #ffffff2e;
  padding: 2px 6px;
  border-radius: 3px;
  background: #111b19cc;
  color: #d8e9e1;
}
.video-feature-copy {
  padding: 38px 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.video-feature-copy .eyebrow {
  font-size: 8px;
  margin-bottom: 14px;
}
.video-feature-copy h3 {
  font-size: 29px;
  font-weight: 430;
  line-height: 1.22;
  letter-spacing: -0.045em;
}
.video-feature-copy h3 span {
  color: #a2b4b5;
}
.video-feature-copy > p {
  font-size: 11px;
  line-height: 1.85;
  color: #99adb1;
  margin-top: 13px;
  margin-bottom: 17px;
}
.video-feature-copy > .text-link {
  font-size: 11px;
  color: #c2ddd0;
}

/* Trust, shown in a diagram */
.security-section {
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  background: #0b1013;
}
.security-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.privacy-diagram {
  height: 343px;
  position: relative;
  border: 1px solid #2b393e;
  border-radius: 6px;
  background: #0c1417;
  overflow: hidden;
  isolation: isolate;
}
.device-label {
  position: absolute;
  left: 18px;
  right: 18px;
  top: 17px;
  font-family: var(--mono);
  font-size: 8px;
  color: #93a8ac;
  display: flex;
  gap: 7px;
  align-items: center;
  letter-spacing: 0.07em;
}
.device-label > .icon {
  height: 13px;
  width: 13px;
}
.private-label {
  margin-left: auto;
  display: flex;
  gap: 4px;
  align-items: center;
  color: #a0c4af;
  font-size: 7px;
}
.private-label > .icon {
  height: 10px;
  width: 10px;
}
.privacy-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.26;
  background-image: radial-gradient(#6a9c8b 1px, transparent 1px);
  background-size: 12px 12px;
  mask-image: radial-gradient(ellipse at center, #000 5%, transparent 73%);
}
.privacy-core {
  position: absolute;
  left: 50%;
  top: 49%;
  transform: translate(-50%, -50%);
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border: 1px solid #5d8176;
  border-radius: 15px;
  background: #162622;
  box-shadow:
    0 0 0 7px #8abea507,
    0 0 0 8px #759c8930;
  z-index: 3;
}
.privacy-core img {
  width: 39px;
  height: 39px;
}
.privacy-orbit {
  position: absolute;
  left: 50%;
  top: 49%;
  transform: translate(-50%, -50%);
  border: 1px solid #547c672e;
  border-radius: 50%;
  z-index: -1;
}
.orbit-one {
  width: 140px;
  height: 140px;
}
.orbit-two {
  width: 213px;
  height: 213px;
  border-style: dashed;
}
.orbit-three {
  width: 288px;
  height: 288px;
  border-color: #577a6021;
}
.privacy-input,
.privacy-output {
  position: absolute;
  top: 47%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform: translateY(-50%);
}
.privacy-input {
  left: 19px;
}
.privacy-output {
  right: 19px;
  align-items: flex-end;
}
.privacy-input > .mono-label,
.privacy-output > .mono-label {
  font-size: 7px;
  letter-spacing: 0.05em;
  color: #92a6a6;
}
.privacy-input > span:last-child,
.privacy-output > span:last-child {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  background: #131e20;
  border: 1px solid #374941;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 9px;
  color: #b4c8bf;
}
.privacy-input > span:last-child {
  color: #c4bca7;
  border-color: #4c4c3d;
}
.privacy-input .icon,
.privacy-output .icon {
  width: 11px;
  height: 11px;
}
.privacy-connector {
  position: absolute;
  top: 50%;
  height: 1px;
  background: #567f66;
  width: calc(50% - 151px);
  min-width: 14px;
  z-index: 0;
}
.connector-left {
  left: 128px;
}
.connector-right {
  right: 131px;
}
.connector-right::after {
  content: "";
  position: absolute;
  right: 0;
  top: -2px;
  width: 5px;
  height: 5px;
  border-top: 1px solid #91bba5;
  border-right: 1px solid #91bba5;
  transform: rotate(45deg);
}
.privacy-bottom {
  position: absolute;
  bottom: 25px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  font-size: 9px;
  color: #9aafa5;
}
.privacy-bottom .status-dot {
  height: 4px;
  width: 4px;
}
.security-points article {
  display: flex;
  gap: 18px;
  padding-block: 21px;
  border-bottom: 1px solid #253036;
}
.security-points article:first-child {
  padding-top: 0;
}
.security-points article:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.security-number {
  font-family: var(--mono);
  font-size: 8px;
  color: #8eaa9a;
  margin-top: 4px;
}
.security-points h3 {
  font-size: 17px;
  letter-spacing: -0.03em;
  font-weight: 450;
  margin-bottom: 8px;
}
.security-points p {
  font-size: 12px;
  line-height: 1.8;
  color: #96a5ad;
}
.security-points .text-link {
  font-size: 11px;
  color: #b2d4c4;
  margin-top: 12px;
}
.testimonial {
  padding-block: 67px;
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  align-items: center;
  gap: 45px;
  border-bottom: 1px solid var(--border-soft);
}
.testimonial-intro .eyebrow {
  margin-bottom: 16px;
  font-size: 8px;
}
.testimonial-rating {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: flex-start;
}
.testimonial-rating .stars {
  font-size: 12px;
  letter-spacing: 3px;
}
.testimonial-rating > span:last-child {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: #94a5ad;
}
.testimonial-rating .icon {
  height: 12px;
  width: 12px;
}
.testimonial blockquote {
  font-size: 25px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.033em;
  color: #dbe4e5;
}
.testimonial figcaption {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 23px;
}
.avatar {
  background: #192b26;
  width: 31px;
  height: 31px;
  border: 1px solid #3a5648;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 9px;
  color: #b5cdbf;
}
.testimonial figcaption > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 9px;
  color: #8b9da4;
}
.testimonial figcaption strong {
  font-size: 10px;
  font-weight: 450;
  color: #c9d6d6;
}
.quote-mark {
  margin-left: auto;
  width: 18px;
  height: 18px;
  color: #698178;
  margin-right: 5px;
}

/* Simple, comparable plans */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid #2c373e;
  border-radius: 7px;
  overflow: hidden;
}
.price-card {
  padding: 28px 27px 31px;
  min-width: 0;
  background: #0d1317;
  border-right: 1px solid #2c373e;
  position: relative;
}
.price-card:last-child {
  border-right: 0;
}
.featured-plan {
  background: linear-gradient(145deg, #182720, #111b18 65%);
}
.featured-plan::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: #a3cfb5;
}
.price-card-heading h3 {
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.035em;
}
.price-card-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.plan-label {
  font-size: 7px;
  color: #8b9b9f;
  letter-spacing: 0.09em;
}
.plan-badge {
  font-family: var(--mono);
  font-size: 7px;
  color: #b5d9c1;
  letter-spacing: 0.06em;
}
.plan-description {
  font-size: 11px;
  color: #99a8ae;
  margin-top: 15px;
}
.price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 22px;
  margin-bottom: 26px;
}
.price > span:first-child {
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.065em;
  font-weight: 400;
}
.price > span:last-child {
  font-size: 10px;
  color: #8f9fa6;
}
.price-card > .button {
  width: 100%;
  min-height: 40px;
  border-radius: 4px;
  font-size: 11px;
  justify-content: space-between;
  padding: 10px 13px;
}
.plan-note {
  display: block;
  min-height: 36px;
  text-align: center;
  font-size: 8px;
  color: #95a49f;
  padding-top: 11px;
  line-height: 1.65;
}
.plan-features {
  list-style: none;
  padding: 22px 0 0;
  margin: 13px 0 0;
  border-top: 1px solid #2c373a;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plan-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: #b3c0c5;
  line-height: 1.6;
  flex-wrap: wrap;
}
.plan-features .icon {
  height: 13px;
  width: 13px;
  color: #9dcab1;
}
.rollout-badge {
  font-size: 7px;
  padding: 0 4px;
  border: 1px solid #485249;
  border-radius: 3px;
  color: #aebdac;
  margin-left: auto;
  line-height: 16px;
}
.pricing-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  margin-top: 21px;
}
.pricing-foot > span {
  font-size: 9px;
  color: #89999f;
}
.pricing-foot .text-link {
  font-size: 10px;
  white-space: nowrap;
}
.pricing-foot .icon {
  width: 12px;
  height: 12px;
}

/* Questions and a clear final action */
.faq-section {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: 75px;
  border-top: 1px solid var(--border-soft);
  padding-top: 88px;
  padding-bottom: 65px;
}
.faq-heading > .eyebrow {
  font-size: 8px;
}
.faq-heading > .text-link {
  font-size: 11px;
  margin-top: 23px;
  color: #b2c4c9;
}
.faq-list {
  padding-top: 1px;
}
.faq-list details {
  border-bottom: 1px solid #28343b;
}
.faq-list details:first-child {
  border-top: 1px solid #28343b;
}
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  cursor: pointer;
  padding: 21px 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.6;
  color: #cbd5d9;
  font-weight: 450;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary .icon {
  height: 15px;
  width: 15px;
  color: #95aaa7;
  transition: transform 0.2s;
}
.faq-list details[open] summary {
  color: #d0ecdf;
}
.faq-list details[open] summary .icon {
  transform: rotate(45deg);
}
.faq-answer {
  padding: 0 28px 23px 0;
  color: #98aab2;
  font-size: 12px;
  line-height: 1.9;
  max-width: 590px;
}
.faq-answer a {
  color: #c3e8d7;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.final-cta {
  position: relative;
  text-align: center;
  padding: 51px 24px 80px;
  isolation: isolate;
  overflow: hidden;
}
.cta-art {
  position: relative;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  margin: 0 auto 28px;
}
.cta-art > img {
  width: 34px;
  height: 34px;
}
.cta-orbit {
  position: absolute;
  inset: 0;
  border: 1px solid #42634f51;
  border-radius: 50%;
  box-shadow:
    0 0 0 13px #6d947b05,
    0 0 0 14px #41674e20;
}
.cta-orbit::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b5d9bf;
  border: 1px solid #d5ebdc;
  box-shadow: 0 0 12px #8ead924a;
}
.final-cta .eyebrow {
  font-size: 8px;
  margin-bottom: 20px;
}
.final-cta h2 {
  font-size: 53px;
  letter-spacing: -0.055em;
  line-height: 1.13;
  font-weight: 430;
}
.final-cta h2 span {
  color: var(--mint);
}
.final-cta > p {
  font-size: 13px;
  color: #94a5ad;
  margin-top: 19px;
  margin-bottom: 25px;
}
.final-cta > .button {
  font-size: 12px;
  min-height: 45px;
}
.final-note {
  display: block;
  font-size: 9px;
  color: #8e9fa5;
  margin-top: 15px;
}
.final-cta::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -160px;
  left: 50%;
  width: 690px;
  height: 400px;
  transform: translateX(-50%);
  background-image: radial-gradient(#619777 1px, transparent 1px);
  background-size: 12px 12px;
  opacity: 0.25;
  mask-image: radial-gradient(ellipse, #000, transparent 70%);
}
.site-footer {
  border-top: 1px solid #26323a;
  padding-top: 53px;
}
.footer-main {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 55px;
  padding-bottom: 48px;
}
.footer-brand .brand {
  font-size: 20px;
}
.footer-brand > p {
  font-size: 11px;
  line-height: 1.8;
  color: #8b9aa2;
  margin: 20px 0 0 2px;
}
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
.footer-links > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.footer-links h3 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  margin-bottom: 6px;
}
.footer-links a,
.footer-links button {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #91a0a9;
  line-height: 1.7;
  padding: 0;
  transition: color 0.2s;
  text-align: left;
}
.footer-links a:hover,
.footer-links button:hover {
  color: var(--mint);
}
.footer-links .icon {
  width: 10px;
  height: 10px;
}
.footer-bottom {
  border-top: 1px solid #202c33;
  min-height: 65px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: #7f919a;
  font-size: 8px;
}
.footer-signoff {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: auto;
}
.footer-signoff .status-dot {
  height: 4px;
  width: 4px;
  background: #99b5a2;
}
.footer-github {
  padding: 9px;
  margin-left: 9px;
  color: #9bb0b7;
}
.footer-github .icon {
  width: 15px;
  height: 15px;
}

/* Native, keyboard-accessible dialogs */
dialog {
  color: var(--text);
  background: #10181d;
  border: 1px solid #425249;
  border-radius: 10px;
  padding: 0;
  box-shadow: 0 30px 100px #0009;
  max-height: 90svh;
  max-width: calc(100% - 32px);
}
dialog::backdrop {
  background: #000c;
  backdrop-filter: blur(7px);
}
.video-dialog {
  width: 1000px;
}
.dialog-top {
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px 0 23px;
  border-bottom: 1px solid #2a383e;
  font-size: 13px;
}
.video-dialog > video {
  width: 100%;
  max-height: 70svh;
  background: #05090b;
  aspect-ratio: 16/9;
}
.video-dialog-caption {
  font-size: 10px;
  color: #9fb0b7;
  text-align: center;
  padding: 12px 20px;
}
.install-dialog {
  width: 410px;
  padding: 38px 30px;
  text-align: center;
}
.close-install {
  position: absolute;
  right: 8px;
  top: 8px;
}
.install-icon {
  width: 54px;
  height: 54px;
  border: 1px solid #385448;
  background: #98d5b90c;
  border-radius: 10px;
  display: grid;
  place-items: center;
  margin: 0 auto 24px;
  color: var(--mint);
}
.install-icon .icon {
  width: 27px;
  height: 27px;
}
.install-dialog > .eyebrow {
  font-size: 8px;
  margin-bottom: 12px;
}
.install-dialog h2 {
  font-size: 33px;
  line-height: 1.14;
  letter-spacing: -0.045em;
}
.install-dialog > p:not(.copy-status) {
  font-size: 12px;
  line-height: 1.85;
  color: #a1b0b7;
  margin: 20px 0 24px;
}
.install-dialog > .button {
  width: 100%;
  font-size: 12px;
}
.install-dialog > .text-link {
  font-size: 11px;
  color: #bdcfc7;
}
.copy-status {
  font-size: 10px;
  color: var(--mint);
  min-height: 20px;
  margin: 8px 0;
}
.install-url {
  display: block;
  width: 100%;
  border: 1px solid #4b6158;
  background: #0a1115;
  color: #d1e9dc;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 18px;
  font-size: 12px;
}

@media (min-width: 1600px) {
  .hero {
    padding-top: 66px;
  }
  .hero h1 {
    font-size: 85px;
  }
  .hero-description {
    font-size: 18px;
  }
  .hero-actions {
    margin-top: 32px;
  }
  .playground-wrap {
    margin-top: 67px;
  }
}
@media (max-width: 1150px) {
  .container {
    width: calc(100% - 72px);
  }
  .nav-shell {
    width: calc(100% - 64px);
  }
  .hero h1 {
    font-size: 67px;
  }
  .guard-pane {
    padding: 22px;
  }
  .guard-title {
    font-size: 21px;
  }
  .code-editor {
    font-size: 10px;
  }
  .prompt-pane {
    padding-inline: 20px;
  }
  .platforms {
    gap: 40px;
  }
  .platforms > span {
    font-size: 19px;
  }
  .platforms .platform-claude,
  .platforms .platform-slack {
    font-size: 22px;
  }
  .feature-grid {
    gap: 19px;
  }
  .scan-lines {
    font-size: 8px;
  }
  .scan-highlight {
    padding-inline: 9px;
    gap: 4px;
  }
  .video-feature-copy {
    padding: 32px;
  }
  .security-layout {
    gap: 35px;
  }
  .privacy-input {
    left: 12px;
  }
  .privacy-output {
    right: 12px;
  }
  .privacy-input > span:last-child,
  .privacy-output > span:last-child {
    font-size: 8px;
    padding: 6px;
  }
  .privacy-core {
    width: 65px;
    height: 65px;
  }
  .privacy-core img {
    width: 34px;
    height: 34px;
  }
  .connector-left {
    left: 106px;
  }
  .connector-right {
    right: 110px;
  }
  .privacy-connector {
    width: calc(50% - 133px);
  }
  .price-card {
    padding-inline: 20px;
  }
  .plan-note {
    font-size: 7px;
  }
  .pricing-foot > span {
    max-width: 400px;
  }
  .section-heading h2,
  .faq-heading h2 {
    font-size: 42px;
  }
}
@media (max-width: 950px) {
  .nav-shell {
    gap: 15px;
  }
  .brand {
    font-size: 19px;
  }
  .desktop-nav {
    margin-left: 0;
    gap: 23px;
  }
  .nav-actions {
    gap: 17px;
  }
  .hero h1 {
    font-size: 61px;
  }
  .hero-description {
    font-size: 16px;
  }
  .playground-body {
    grid-template-columns: 1.2fr 1fr;
  }
  .guard-pane {
    padding: 20px;
  }
  .guard-title {
    font-size: 19px;
  }
  .guard-description {
    font-size: 10px;
  }
  .guard-brand {
    font-size: 12px;
  }
  .guard-brand img {
    width: 20px;
    height: 20px;
  }
  .local-chip {
    font-size: 7px;
  }
  .code-editor {
    font-size: 9px;
  }
  .line-number {
    width: 21px;
    flex-basis: 21px;
  }
  .example-tabs button {
    padding-inline: 9px;
  }
  .prompt-foot-state {
    display: none;
  }
  .platforms {
    gap: 28px;
  }
  .platforms > span {
    font-size: 17px;
  }
  .platforms .platform-claude,
  .platforms .platform-slack {
    font-size: 20px;
  }
  .platforms .icon {
    width: 18px;
    height: 18px;
  }
  .section {
    padding-block: 77px;
  }
  .section-heading {
    gap: 30px;
  }
  .section-heading h2,
  .faq-heading h2 {
    font-size: 38px;
  }
  .section-heading > p {
    font-size: 12px;
    max-width: 310px;
  }
  .feature-visual {
    height: 210px;
  }
  .feature-grid {
    gap: 16px;
  }
  .feature h3 {
    font-size: 17px;
  }
  .feature > p {
    font-size: 11px;
    padding-right: 0;
  }
  .scan-lines {
    font-size: 7px;
    margin-inline: 10px;
  }
  .scan-highlight {
    margin-left: -10px;
    padding-inline: 8px;
    gap: 3px;
  }
  .visual-topline {
    padding-inline: 11px;
    font-size: 8px;
  }
  .redact-message {
    margin: 17px 14px;
    font-size: 8px;
  }
  .redact-before {
    font-size: 9px;
  }
  .redact-after {
    font-size: 10px;
  }
  .vault-row {
    margin-inline: 12px;
    font-size: 8px;
    padding-block: 13px;
  }
  .vault-restore {
    font-size: 7px;
    margin-inline: 12px;
  }
  .scan-result {
    font-size: 7px;
    padding-inline: 10px;
  }
  .video-feature-copy h3 {
    font-size: 27px;
  }
  .security-layout {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
  .privacy-diagram {
    height: 332px;
  }
  .privacy-input,
  .privacy-output {
    top: 73%;
    transform: none;
  }
  .privacy-input {
    left: 25px;
  }
  .privacy-output {
    right: 25px;
  }
  .privacy-input > span:last-child,
  .privacy-output > span:last-child {
    font-size: 9px;
  }
  .privacy-core,
  .privacy-orbit {
    top: 40%;
  }
  .orbit-three {
    width: 265px;
    height: 265px;
  }
  .privacy-bottom {
    bottom: 13px;
    font-size: 8px;
  }
  .privacy-connector {
    top: 80%;
    width: 30px;
  }
  .connector-left {
    left: calc(50% - 14px);
  }
  .connector-right {
    display: none;
  }
  .privacy-core {
    width: 70px;
    height: 70px;
  }
  .security-points h3 {
    font-size: 15px;
  }
  .security-points p {
    font-size: 11px;
  }
  .security-points article {
    gap: 12px;
    padding-block: 17px;
  }
  .testimonial {
    gap: 25px;
  }
  .testimonial blockquote {
    font-size: 23px;
  }
  .price-card {
    padding: 23px 16px;
  }
  .price-card-heading h3 {
    font-size: 17px;
  }
  .plan-description {
    font-size: 10px;
    min-height: 32px;
  }
  .plan-features li {
    font-size: 10px;
    gap: 6px;
  }
  .plan-note {
    font-size: 7px;
    min-height: 38px;
  }
  .price-card > .button {
    font-size: 10px;
    padding-inline: 9px;
  }
  .price-card .button > .icon {
    width: 13px;
    height: 13px;
  }
  .price > span:last-child {
    font-size: 8px;
  }
  .price > span:first-child {
    font-size: 44px;
  }
  .pricing-foot {
    align-items: flex-start;
  }
  .pricing-foot > span {
    max-width: 330px;
  }
  .faq-section {
    gap: 45px;
  }
  .faq-list summary {
    font-size: 12px;
  }
  .footer-main {
    grid-template-columns: 0.8fr 1.4fr;
  }
  .footer-links {
    gap: 20px;
  }
}
@media (max-width: 760px) {
  html {
    scroll-padding-top: 87px;
  }
  .container {
    width: calc(100% - 40px);
  }
  .site-header {
    height: 67px;
  }
  .nav-shell {
    width: calc(100% - 40px);
  }
  .brand {
    font-size: 19px;
    gap: 7px;
  }
  .brand img {
    width: 27px;
    height: 27px;
  }
  .desktop-nav,
  .nav-signin {
    display: none;
  }
  .nav-install {
    min-height: 34px;
    font-size: 10px;
    padding: 8px 10px;
  }
  .nav-actions {
    gap: 10px;
  }
  .menu-toggle {
    display: flex;
    width: 32px;
    height: 36px;
  }
  .menu-toggle .icon {
    width: 22px;
    height: 22px;
  }
  .close-icon {
    display: none;
  }
  .menu-toggle[aria-expanded="true"] .menu-icon {
    display: none;
  }
  .menu-toggle[aria-expanded="true"] .close-icon {
    display: block;
  }
  .mobile-menu {
    top: 66px;
  }
  .hero {
    padding-top: 42px;
  }
  .announcement {
    font-size: 9px;
    padding-block: 3px;
  }
  .hero h1 {
    font-size: 52px;
    line-height: 1.08;
    margin-top: 28px;
    letter-spacing: -0.06em;
  }
  .hero-description {
    font-size: 15px;
    line-height: 1.75;
    max-width: 400px;
    margin-inline: auto;
  }
  .desktop-break {
    display: none;
  }
  .hero-actions {
    gap: 10px;
    margin-top: 25px;
    flex-wrap: wrap;
  }
  .hero-actions .button {
    font-size: 11px;
    padding: 12px 15px;
    min-height: 43px;
  }
  .hero-assurance {
    font-size: 9px;
    gap: 15px;
    margin-top: 15px;
  }
  .playground-wrap {
    margin-top: 44px;
  }
  .playground-body {
    grid-template-columns: 1fr 1fr;
  }
  .prompt-pane {
    padding-inline: 15px;
  }
  .guard-pane {
    padding: 18px 15px;
  }
  .guard-brand {
    font-size: 11px;
  }
  .guard-brand img {
    width: 19px;
    height: 19px;
  }
  .local-chip {
    border: 0;
    background: none;
    padding: 0;
    font-size: 6px;
    gap: 3px;
  }
  .local-chip .status-dot {
    width: 3px;
    height: 3px;
  }
  .guard-title {
    font-size: 19px;
  }
  .guard-description {
    font-size: 9px;
  }
  .guard-content {
    margin-top: 19px;
  }
  .guard-eyebrow {
    font-size: 6px;
  }
  .guard-note {
    font-size: 8px;
  }
  .detected-item {
    font-size: 9px;
    padding: 8px;
    margin-block: 16px;
  }
  .protect-button {
    font-size: 10px;
  }
  .code-editor {
    font-size: 8px;
    min-height: 224px;
  }
  .line-number {
    width: 19px;
    flex-basis: 19px;
    font-size: 8px;
  }
  .example-tabs {
    gap: 2px;
    padding: 3px;
  }
  .example-tabs button {
    font-size: 8px;
    padding: 5px 7px;
  }
  .demo-progress {
    gap: 12px;
  }
  .progress-line {
    width: 33px;
  }
  .demo-progress > span:not(.progress-line) {
    font-size: 8px;
    gap: 5px;
  }
  .demo-progress i {
    font-size: 7px;
  }
  .hero-proof {
    font-size: 9px;
    gap: 15px;
  }
  .hero-proof > a {
    gap: 6px;
  }
  .hero-proof .stars {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .hero-proof .icon {
    height: 10px;
    width: 10px;
  }
  .integrations {
    padding-block: 48px;
  }
  .platforms {
    gap: 26px;
    row-gap: 22px;
    flex-wrap: wrap;
    max-width: 440px;
    margin-inline: auto;
  }
  .platforms > span {
    justify-content: center;
    min-width: 90px;
    font-size: 18px;
  }
  .platforms .platform-claude,
  .platforms .platform-slack {
    font-size: 21px;
  }
  .section {
    padding-block: 65px;
  }
  .section-heading {
    display: block;
    margin-bottom: 34px;
  }
  .eyebrow {
    font-size: 9px;
    margin-bottom: 17px;
  }
  .section-heading h2,
  .faq-heading h2 {
    font-size: 37px;
  }
  .section-heading > p {
    max-width: 420px;
    font-size: 13px;
    margin-top: 20px;
    line-height: 1.8;
  }
  .feature-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  .feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 25px;
    align-content: center;
    align-items: start;
  }
  .feature-visual {
    grid-row: 1/5;
    height: 207px;
    margin: 0;
  }
  .feature-index {
    margin-top: 25px;
    font-size: 8px;
  }
  .feature h3 {
    font-size: 20px;
    line-height: 1.3;
    margin-bottom: 10px;
  }
  .feature > p {
    font-size: 12px;
    line-height: 1.8;
  }
  .feature-visual .visual-topline {
    font-size: 8px;
  }
  .scan-lines {
    font-size: 8px;
  }
  .redact-message {
    font-size: 9px;
  }
  .redact-before {
    font-size: 10px;
  }
  .vault-row {
    font-size: 9px;
  }
  .vault-restore {
    font-size: 8px;
  }
  .video-feature {
    margin-top: 43px;
    grid-template-columns: 1fr 1fr;
  }
  .video-preview > img {
    min-height: 220px;
  }
  .video-feature-copy {
    padding: 25px;
  }
  .video-feature-copy h3 {
    font-size: 24px;
  }
  .video-feature-copy > p {
    font-size: 10px;
  }
  .video-feature-copy > .text-link {
    font-size: 10px;
  }
  .security-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .privacy-diagram {
    height: 310px;
    max-width: 580px;
  }
  .privacy-input,
  .privacy-output {
    top: 45%;
    transform: translateY(-50%);
  }
  .privacy-input {
    left: 35px;
  }
  .privacy-output {
    right: 35px;
  }
  .privacy-core,
  .privacy-orbit {
    top: 47%;
  }
  .privacy-connector {
    top: 48%;
    width: calc(50% - 148px);
  }
  .connector-left {
    left: 135px;
  }
  .connector-right {
    right: 142px;
    display: block;
  }
  .privacy-bottom {
    bottom: 22px;
    font-size: 9px;
  }
  .privacy-core {
    width: 75px;
    height: 75px;
  }
  .orbit-three {
    width: 270px;
    height: 270px;
  }
  .security-points h3 {
    font-size: 17px;
  }
  .security-points p {
    font-size: 12px;
  }
  .security-points article {
    padding-block: 22px;
    gap: 18px;
  }
  .testimonial {
    padding-block: 43px;
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .testimonial-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }
  .testimonial-intro .eyebrow {
    margin: 0;
    font-size: 7px;
  }
  .testimonial-rating {
    gap: 4px;
    align-items: flex-end;
  }
  .testimonial-rating > span:last-child {
    font-size: 8px;
  }
  .testimonial-rating > .stars {
    font-size: 9px;
  }
  .testimonial blockquote {
    font-size: 26px;
  }
  .quote-mark {
    margin-right: 0;
  }
  .pricing-grid {
    grid-template-columns: 1fr;
    border: 0;
    gap: 20px;
    overflow: visible;
  }
  .price-card {
    padding: 25px;
    border: 1px solid #2c373e !important;
    border-radius: 6px;
  }
  .featured-plan {
    border-color: #577565 !important;
    overflow: hidden;
  }
  .price-card-heading {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  .price-card-heading h3 {
    font-size: 22px;
  }
  .plan-description {
    font-size: 12px;
    min-height: 0;
    margin-top: 11px;
  }
  .price {
    margin-top: 21px;
    margin-bottom: 24px;
  }
  .price > span:first-child {
    font-size: 51px;
  }
  .price > span:last-child {
    font-size: 11px;
  }
  .price-card > .button {
    font-size: 12px;
    min-height: 44px;
  }
  .plan-note {
    min-height: 29px;
    font-size: 9px;
  }
  .plan-features {
    gap: 12px;
    padding-top: 19px;
    margin-top: 14px;
  }
  .plan-features li {
    font-size: 12px;
  }
  .rollout-badge {
    font-size: 8px;
  }
  .pricing-foot {
    flex-direction: column;
    gap: 14px;
  }
  .pricing-foot > span {
    font-size: 10px;
    max-width: none;
  }
  .pricing-foot > .text-link {
    font-size: 11px;
  }
  .faq-section {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 54px;
  }
  .faq-heading h2 br {
    display: none;
  }
  .faq-heading h2 span {
    margin-left: 7px;
  }
  .faq-heading > .text-link {
    margin-top: 16px;
  }
  .faq-list summary {
    font-size: 13px;
    padding-block: 20px;
  }
  .faq-answer {
    font-size: 12px;
  }
  .final-cta {
    padding-top: 25px;
    padding-bottom: 62px;
  }
  .final-cta h2 {
    font-size: 43px;
  }
  .final-cta > p {
    font-size: 12px;
  }
  .site-footer {
    padding-top: 40px;
  }
  .footer-main {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-bottom: 34px;
  }
  .footer-brand {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .footer-brand > p {
    margin: 0;
    font-size: 10px;
  }
  .footer-links {
    gap: 25px;
  }
  .footer-links h3 {
    font-size: 12px;
  }
  .footer-links a,
  .footer-links button {
    font-size: 11px;
  }
  .footer-bottom {
    font-size: 8px;
    flex-wrap: wrap;
    gap: 10px;
    padding-block: 16px;
    position: relative;
    padding-right: 25px;
  }
  .footer-signoff {
    margin-left: 0;
  }
  .footer-github {
    position: absolute;
    right: -7px;
    bottom: 17px;
  }
  .footer-github .icon {
    height: 17px;
    width: 17px;
  }
}
@media (max-width: 540px) {
  .container {
    width: calc(100% - 40px);
  }
  .hero {
    padding-top: 37px;
  }
  .hero h1 {
    font-size: 43px;
    max-width: 430px;
    margin-inline: auto;
    line-height: 1.12;
  }
  .hero-description {
    max-width: 330px;
    font-size: 14px;
  }
  .hero-actions {
    flex-direction: column;
    gap: 5px;
    margin-top: 23px;
  }
  .hero-actions > .button-mint {
    min-width: 236px;
  }
  .hero-actions > .button-quiet {
    min-height: 39px;
    padding-block: 7px;
  }
  .hero-assurance {
    margin-top: 11px;
  }
  .playground-wrap {
    margin-top: 35px;
  }
  .demo-caption {
    font-size: 7px;
    margin-bottom: 10px;
  }
  .demo-caption > span:last-child {
    font-size: 9px;
  }
  .playground-toolbar {
    padding-inline: 13px;
    gap: 8px;
    height: 40px;
  }
  .toolbar-title {
    font-size: 9px;
  }
  .demo-label {
    font-size: 6px;
    letter-spacing: 0.03em;
  }
  .reset-demo {
    margin-left: 3px;
    margin-right: -5px;
    width: 25px;
  }
  .window-dots {
    gap: 4px;
  }
  .window-dots i {
    width: 5px;
    height: 5px;
  }
  .playground-body {
    grid-template-columns: 1fr;
  }
  .prompt-pane {
    padding: 20px 19px 0;
  }
  .prompt-heading .mono-label {
    font-size: 8px;
  }
  .example-tabs {
    margin-block: 15px 18px;
    padding: 3px;
    gap: 3px;
  }
  .example-tabs button {
    font-size: 10px;
    min-height: 32px;
    padding: 5px 11px;
  }
  .code-editor {
    font-size: 10px;
    min-height: 209px;
    padding-bottom: 17px;
    line-height: 2.25;
  }
  .code-line {
    min-height: 24px;
  }
  .line-number {
    width: 24px;
    flex-basis: 24px;
    font-size: 8px;
  }
  .prompt-foot {
    min-height: 37px;
    font-size: 8px;
  }
  .prompt-foot-state {
    display: flex;
    font-size: 7px;
  }
  .guard-pane {
    border-left: 0;
    border-top: 1px solid #2b3937;
    padding: 20px;
  }
  .guard-brand {
    font-size: 12px;
  }
  .guard-brand img {
    width: 23px;
    height: 23px;
  }
  .local-chip {
    font-size: 8px;
    padding: 3px 6px;
    border: 1px solid #789e863b;
    background: #9bf2bd07;
    gap: 5px;
  }
  .guard-content {
    margin-top: 20px;
    padding-left: 48px;
  }
  .verdict-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 33px;
    height: 33px;
    margin: 0;
  }
  .verdict-icon > .icon {
    height: 17px;
    width: 17px;
  }
  .guard-eyebrow {
    font-size: 7px;
    margin-bottom: 5px;
  }
  .guard-title {
    font-size: 21px;
    margin-bottom: 8px;
  }
  .guard-description {
    font-size: 11px;
    line-height: 1.75;
    min-height: auto;
  }
  .guard-description br {
    display: none;
  }
  .detected-item {
    font-size: 10px;
    margin: 16px 0 18px;
    padding: 9px;
  }
  .detected-line {
    font-size: 8px;
  }
  .protect-button {
    font-size: 11px;
    min-height: 40px;
  }
  .guard-note {
    font-size: 8px;
    margin-top: 9px;
  }
  .demo-progress {
    gap: 9px;
    padding-inline: 12px;
    height: 42px;
    justify-content: space-between;
  }
  .demo-progress > span:not(.progress-line) {
    font-size: 7px;
    gap: 4px;
    flex-wrap: wrap;
    line-height: 1.4;
  }
  .demo-progress i {
    font-size: 6px;
  }
  .progress-line {
    width: 15px;
    flex-shrink: 0;
  }
  .hero-proof {
    flex-direction: column;
    gap: 12px;
    margin-top: 19px;
    font-size: 9px;
  }
  .hero-proof-divider {
    display: none;
  }
  .hero-proof .stars {
    font-size: 9px;
  }
  .hero-proof .icon {
    height: 11px;
    width: 11px;
  }
  .integrations {
    padding-top: 41px;
    padding-bottom: 37px;
  }
  .integrations > .mono-label {
    font-size: 7px;
  }
  .platforms {
    gap: 23px;
    row-gap: 20px;
    justify-content: space-around;
    margin-top: 23px;
  }
  .platforms > span {
    font-size: 17px;
    min-width: 80px;
  }
  .platforms .platform-claude,
  .platforms .platform-slack {
    font-size: 20px;
  }
  .integrations-note {
    font-size: 9px;
    margin-top: 20px;
  }
  .section {
    padding-block: 55px;
  }
  .section-heading h2,
  .faq-heading h2 {
    font-size: 35px;
  }
  .section-heading > p {
    font-size: 12px;
    margin-top: 17px;
  }
  .eyebrow {
    font-size: 8px;
    letter-spacing: 0.09em;
  }
  .section-heading {
    margin-bottom: 30px;
  }
  .feature-grid {
    gap: 35px;
  }
  .feature {
    display: block;
  }
  .feature-visual {
    height: 218px;
    margin-bottom: 20px;
  }
  .visual-topline {
    padding-inline: 17px !important;
    font-size: 9px !important;
  }
  .scan-lines {
    font-size: 10px;
    margin: 16px 18px;
    gap: 8px;
  }
  .scan-highlight {
    margin-left: -18px;
    padding: 6px 14px;
    gap: 5px;
  }
  .scan-result {
    font-size: 8px;
    padding: 8px 16px;
  }
  .redact-message {
    margin: 18px 23px;
    font-size: 10px;
    gap: 9px;
  }
  .redact-before {
    font-size: 12px;
  }
  .redact-after {
    font-size: 13px;
  }
  .vault-row {
    font-size: 10px;
    padding-block: 14px;
    margin-inline: 21px;
  }
  .vault-restore {
    font-size: 9px;
    margin-inline: 21px;
    margin-top: 15px;
  }
  .vault-local {
    font-size: 8px;
  }
  .feature-index {
    margin-top: 0;
    font-size: 8px;
  }
  .feature h3 {
    font-size: 22px;
    margin-bottom: 9px;
  }
  .feature > p {
    font-size: 13px;
    max-width: 390px;
  }
  .video-feature {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }
  .video-preview {
    border-right: 0;
    border-bottom: 1px solid #2b363e;
  }
  .video-preview > img {
    min-height: 0;
    aspect-ratio: 16/9;
  }
  .video-feature-copy {
    padding: 26px;
  }
  .video-feature-copy h3 {
    font-size: 27px;
  }
  .video-feature-copy > p {
    font-size: 12px;
  }
  .video-feature-copy > .text-link {
    font-size: 11px;
  }
  .privacy-diagram {
    height: 301px;
  }
  .privacy-input,
  .privacy-output {
    top: 68%;
    transform: none;
  }
  .privacy-input {
    left: 23px;
  }
  .privacy-output {
    right: 23px;
  }
  .privacy-core,
  .privacy-orbit {
    top: 39%;
  }
  .privacy-core {
    width: 66px;
    height: 66px;
  }
  .privacy-core img {
    height: 33px;
    width: 33px;
  }
  .orbit-one {
    width: 126px;
    height: 126px;
  }
  .orbit-two {
    width: 180px;
    height: 180px;
  }
  .orbit-three {
    width: 235px;
    height: 235px;
  }
  .privacy-connector {
    top: 77%;
    width: calc(100% - 270px);
  }
  .connector-left {
    left: 134px;
  }
  .connector-right {
    display: none;
  }
  .privacy-input > span:last-child,
  .privacy-output > span:last-child {
    padding: 6px 8px;
    font-size: 9px;
  }
  .privacy-input > .mono-label,
  .privacy-output > .mono-label {
    font-size: 6px;
  }
  .privacy-bottom {
    font-size: 8px;
    bottom: 19px;
  }
  .security-points h3 {
    font-size: 16px;
  }
  .security-points p {
    font-size: 12px;
  }
  .security-points article {
    gap: 15px;
  }
  .testimonial-intro {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  .testimonial-rating {
    align-items: flex-start;
  }
  .testimonial-rating > span:last-child {
    font-size: 9px;
  }
  .testimonial blockquote {
    font-size: 25px;
  }
  .testimonial figcaption {
    margin-top: 18px;
  }
  .price-card {
    padding: 26px;
  }
  .price-card-heading {
    flex-wrap: wrap;
    gap: 10px;
  }
  .price-card-heading h3 {
    font-size: 21px;
  }
  .plan-badge,
  .plan-label {
    font-size: 6px;
  }
  .price-card-heading {
    column-gap: 7px;
  }
  .faq-heading h2 {
    font-size: 34px;
  }
  .faq-heading h2 span {
    margin-left: 5px;
  }
  .faq-list summary {
    font-size: 12px;
    gap: 17px;
  }
  .faq-answer {
    font-size: 12px;
    padding-right: 8px;
  }
  .final-cta {
    padding-top: 32px;
  }
  .final-cta h2 {
    font-size: 39px;
  }
  .final-cta > .button {
    font-size: 11px;
  }
  .cta-art {
    width: 78px;
    height: 78px;
    margin-bottom: 29px;
  }
  .cta-art > img {
    height: 29px;
    width: 29px;
  }
  .footer-brand {
    display: block;
  }
  .footer-brand > p {
    margin-top: 16px;
  }
  .footer-brand .brand {
    font-size: 20px;
  }
  .footer-links {
    gap: 13px;
  }
  .footer-links h3 {
    font-size: 11px;
  }
  .footer-links a,
  .footer-links button {
    font-size: 10px;
  }
  .footer-bottom > span:first-child {
    width: 100%;
  }
  .video-dialog-caption {
    font-size: 8px;
    padding: 10px;
  }
  .dialog-top {
    height: 49px;
    font-size: 12px;
    padding-left: 16px;
  }
  .install-dialog {
    padding: 35px 24px;
  }
  .install-dialog h2 {
    font-size: 31px;
  }
}
@media (max-width: 360px) {
  .nav-install {
    display: none;
  }
  .hero h1 {
    font-size: 38px;
  }
  .container,
  .nav-shell {
    width: calc(100% - 32px);
  }
  .code-editor {
    font-size: 9px;
  }
  .example-tabs button {
    font-size: 9px;
  }
  .privacy-input {
    left: 16px;
  }
  .privacy-output {
    right: 16px;
  }
  .demo-label {
    display: none;
  }
  .reset-demo {
    margin-left: auto;
  }
  .hero-assurance {
    font-size: 8px;
    gap: 12px;
  }
  .guard-title {
    font-size: 19px;
  }
  .demo-progress {
    gap: 6px;
  }
  .progress-line {
    width: 8px;
  }
  .demo-progress > span:not(.progress-line) {
    font-size: 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Keep the marketing copy comfortably readable at every screen size. */
.section-heading > p {
  font-size: 15px;
  max-width: 385px;
  line-height: 1.8;
}
.feature h3 {
  font-size: 22px;
}
.feature > p {
  font-size: 14px;
  line-height: 1.85;
}
.feature-index {
  font-size: 9px;
}
.video-feature-copy > p {
  font-size: 14px;
}
.video-feature-copy > .text-link {
  font-size: 13px;
}
.security-points h3 {
  font-size: 19px;
}
.security-points p {
  font-size: 14px;
  line-height: 1.8;
}
.security-points .text-link {
  font-size: 13px;
}
.security-number {
  font-size: 10px;
}
.plan-description {
  font-size: 13px;
}
.plan-features li {
  font-size: 13px;
}
.price-card > .button {
  font-size: 12px;
  min-height: 43px;
}
.plan-note {
  font-size: 9px;
  min-height: 42px;
}
.plan-label,
.plan-badge {
  font-size: 8px;
}
.pricing-foot > span {
  font-size: 11px;
  max-width: 530px;
}
.pricing-foot > .text-link {
  font-size: 12px;
}
.faq-list summary {
  font-size: 15px;
  padding-block: 23px;
}
.faq-answer {
  font-size: 14px;
}
.faq-heading > .text-link {
  font-size: 13px;
}
.footer-brand > p {
  font-size: 13px;
}
.footer-links h3 {
  font-size: 13px;
}
.footer-links a,
.footer-links button {
  font-size: 12px;
}
.footer-links > div {
  gap: 12px;
}
.footer-bottom {
  font-size: 10px;
}
.final-cta > p {
  font-size: 15px;
}
.final-note {
  font-size: 11px;
}
.hero-assurance {
  font-size: 11px;
}
.hero-proof {
  font-size: 12px;
}
.hero-proof .icon {
  height: 14px;
  width: 14px;
}
.integrations > .mono-label {
  font-size: 10px;
}
.integrations-note {
  font-size: 12px;
}
.testimonial-intro .eyebrow {
  font-size: 10px;
}
.testimonial-rating > span:last-child {
  font-size: 12px;
}
.testimonial figcaption strong {
  font-size: 12px;
}
.testimonial figcaption > span:nth-child(2) {
  font-size: 11px;
}
.guard-description {
  font-size: 13px;
  min-height: 46px;
}
.guard-eyebrow {
  font-size: 9px;
}
.guard-note {
  font-size: 10px;
}
.detected-item {
  font-size: 12px;
}
.detected-line {
  font-size: 10px;
}
.protect-button {
  font-size: 12px;
  min-height: 40px;
}
.example-tabs button {
  font-size: 12px;
  min-height: 32px;
}
.code-editor {
  font-size: 13px;
  min-height: 245px;
}
.prompt-foot {
  font-size: 10px;
}
.guard-title {
  font-size: 24px;
}
.demo-progress > span:not(.progress-line) {
  font-size: 10px;
}
.demo-caption {
  font-size: 10px;
}
.demo-caption > span:last-child {
  font-size: 12px;
}
.toolbar-title {
  font-size: 12px;
}
.local-chip {
  font-size: 9px;
}
.demo-label {
  font-size: 9px;
}
@media (min-width: 761px) {
  .scan-lines {
    font-size: 10px;
  }
  .scan-result {
    font-size: 10px;
  }
  .visual-topline {
    font-size: 11px;
  }
  .redact-message {
    font-size: 11px;
  }
  .vault-restore {
    font-size: 10px;
  }
  .vault-local {
    font-size: 9px;
  }
  .privacy-input > .mono-label,
  .privacy-output > .mono-label {
    font-size: 8px;
  }
  .privacy-input > span:last-child,
  .privacy-output > span:last-child {
    font-size: 11px;
  }
  .privacy-bottom {
    font-size: 11px;
  }
  .device-label {
    font-size: 10px;
  }
  .private-label {
    font-size: 9px;
  }
  .privacy-core {
    width: 78px;
    height: 78px;
  }
  .privacy-diagram {
    height: 370px;
  }
  .mini-badge {
    font-size: 8px;
  }
  .plan-description {
    min-height: 42px;
  }
}
@media (min-width: 761px) and (max-width: 1050px) {
  .scan-lines {
    font-size: 8px;
  }
  .scan-result {
    font-size: 8px;
  }
  .visual-topline {
    font-size: 9px;
  }
  .redact-message {
    font-size: 9px;
  }
  .vault-restore {
    font-size: 8px;
  }
  .vault-local {
    font-size: 7px;
  }
  .guard-description {
    font-size: 11px;
  }
  .guard-title {
    font-size: 21px;
  }
  .code-editor {
    font-size: 10px;
  }
  .example-tabs button {
    font-size: 10px;
  }
  .local-chip {
    font-size: 7px;
  }
  .plan-label,
  .plan-badge {
    font-size: 7px;
  }
  .plan-note {
    font-size: 8px;
    min-height: 44px;
  }
  .plan-features li {
    font-size: 11px;
  }
  .section-heading > p {
    max-width: 325px;
    font-size: 14px;
  }
  .privacy-input > span:last-child,
  .privacy-output > span:last-child {
    font-size: 9px;
  }
  .privacy-input > .mono-label,
  .privacy-output > .mono-label {
    font-size: 6px;
  }
  .privacy-bottom {
    font-size: 9px;
  }
  .security-points p {
    font-size: 13px;
  }
}
@media (max-width: 760px) {
  .section-heading > p {
    font-size: 14px;
  }
  .hero-assurance {
    font-size: 10px;
  }
  .hero-proof {
    font-size: 10px;
  }
  .integrations > .mono-label {
    font-size: 8px;
  }
  .integrations-note {
    font-size: 11px;
  }
  .guard-description {
    font-size: 11px;
    min-height: 40px;
  }
  .guard-title {
    font-size: 20px;
  }
  .guard-eyebrow {
    font-size: 7px;
  }
  .guard-note {
    font-size: 9px;
  }
  .detected-item {
    font-size: 10px;
  }
  .detected-line {
    font-size: 8px;
  }
  .example-tabs button {
    font-size: 9px;
    padding-inline: 8px;
  }
  .code-editor {
    font-size: 9px;
    min-height: 230px;
  }
  .local-chip {
    font-size: 6px;
  }
  .protect-button {
    font-size: 10px;
  }
  .prompt-foot {
    font-size: 8px;
  }
  .demo-progress > span:not(.progress-line) {
    font-size: 8px;
  }
  .demo-caption {
    font-size: 8px;
  }
  .demo-caption > span:last-child {
    font-size: 10px;
  }
  .toolbar-title {
    font-size: 10px;
  }
  .demo-label {
    font-size: 7px;
  }
  .feature h3 {
    font-size: 21px;
  }
  .feature > p {
    font-size: 13px;
  }
  .feature-index {
    font-size: 8px;
  }
  .security-points h3 {
    font-size: 18px;
  }
  .security-points p {
    font-size: 14px;
  }
  .testimonial-intro .eyebrow {
    font-size: 8px;
  }
  .testimonial-rating > span:last-child {
    font-size: 10px;
  }
  .pricing-foot > span {
    font-size: 11px;
  }
  .faq-list summary {
    font-size: 14px;
  }
  .faq-answer {
    font-size: 14px;
  }
  .footer-brand > p {
    font-size: 12px;
  }
  .footer-links h3 {
    font-size: 12px;
  }
  .footer-links a,
  .footer-links button {
    font-size: 11px;
  }
  .footer-bottom {
    font-size: 9px;
  }
  .video-feature-copy > p {
    font-size: 12px;
  }
  .video-feature-copy > .text-link {
    font-size: 11px;
  }
}
@media (max-width: 540px) {
  .guard-content {
    padding-left: 43px;
  }
  .guard-title {
    font-size: 22px;
  }
  .guard-description {
    font-size: 12px;
    min-height: 0;
  }
  .guard-eyebrow {
    font-size: 7px;
  }
  .local-chip {
    font-size: 8px;
  }
  .detected-item {
    font-size: 11px;
  }
  .protect-button {
    font-size: 12px;
    min-height: 44px;
  }
  .guard-note {
    font-size: 10px;
  }
  .code-editor {
    font-size: 10px;
    min-height: 210px;
  }
  .example-tabs button {
    font-size: 10px;
    min-height: 34px;
    padding-inline: 10px;
  }
  .hero-assurance {
    font-size: 9px;
  }
  .feature h3 {
    font-size: 23px;
  }
  .feature > p {
    font-size: 14px;
  }
  .demo-progress > span:not(.progress-line) {
    font-size: 7px;
  }
  .demo-caption {
    font-size: 7px;
  }
  .demo-caption > span:last-child {
    font-size: 10px;
  }
  .toolbar-title {
    font-size: 9px;
  }
  .demo-label {
    font-size: 6px;
  }
  .plan-note {
    font-size: 9px;
  }
  .plan-label,
  .plan-badge {
    font-size: 7px;
  }
  .price-card > .button {
    font-size: 12px;
  }
  .footer-bottom {
    font-size: 8px;
  }
  .privacy-bottom {
    font-size: 9px;
  }
  .faq-heading > .text-link {
    font-size: 12px;
  }
  .final-cta > p {
    font-size: 14px;
  }
}
@media (max-width: 360px) {
  .guard-title {
    font-size: 20px;
  }
  .code-editor {
    font-size: 9px;
  }
  .example-tabs button {
    font-size: 9px;
  }
  .hero-assurance {
    font-size: 8px;
  }
  .guard-description {
    font-size: 11px;
  }
  .plan-label,
  .plan-badge {
    font-size: 6px;
  }
  .price-card {
    padding: 22px;
  }
  .demo-progress > span:not(.progress-line) {
    font-size: 6px;
  }
}