/* Cloudcraft marketing site
   One stylesheet for every page. The palette, type and card language come straight from the web-v6 film
   (ink #0B1433, slate #56627F, the chapter colours), so the page and the film read as one piece. */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ink and text */
  --ink: #0b1433;
  --ink-2: #1c2647;
  --body: #3d4866;
  --slate: #56627f;
  --muted: #68738d;
  --faint: #a3acc0;

  /* surfaces and lines */
  --bg: #ffffff;
  --bg-2: #f7f8fb;
  --bg-3: #eef1f6;
  --line: #e8ebf1;
  --line-2: #dce1ea;
  --line-3: #c9d0dc;

  /* brand */
  --brand-blue: #4286c5;
  --brand-yellow: #f5b720;
  --brand-yellow-2: #e4a40a;
  --dd-purple: #632ca6;

  /* the film's chapter colours: bright for marks, deep for text. The deep red, orange and amber sit well apart in
     hue (crimson, orange, gold) so they stay distinct side by side, and each passes 4.5:1 on white. */
  --blue: #2f6fd0;
  --blue-deep: #2158b4;
  --blue-tint: #eaf1fc;
  --red: #d6293f;
  --red-deep: #b51446;
  --red-tint: #fdecee;
  --orange: #e5711f;
  --orange-deep: #c55000;
  --orange-tint: #fdf0e6;
  --amber: #e0a106;
  --amber-deep: #876207;
  --amber-tint: #fdf5df;
  --green: #18a86b;
  --green-deep: #0f7a50;
  --green-tint: #e3f7ee;
  --violet: #7b61d8;
  --violet-tint: #efebfb;
  --teal: #13a389;

  /* dark ground */
  --navy: #0b1433;
  --navy-2: #121c40;
  --navy-line: rgba(255, 255, 255, 0.1);
  --on-navy: #ffffff;
  --on-navy-2: #c9cfdd;
  --on-navy-3: #8b95ad;

  /* shape */
  --r-xs: 6px;
  --r-s: 10px;
  --r: 16px;
  --r-l: 24px;
  --r-xl: 32px;

  /* elevation, tinted with ink */
  --sh-1: 0 1px 2px rgba(11, 20, 51, 0.05), 0 1px 1px rgba(11, 20, 51, 0.03);
  --sh-2: 0 1px 2px rgba(11, 20, 51, 0.04), 0 4px 12px -4px rgba(11, 20, 51, 0.08), 0 16px 36px -16px rgba(11, 20, 51, 0.12);
  --sh-3: 0 1px 2px rgba(11, 20, 51, 0.04), 0 10px 28px -10px rgba(11, 20, 51, 0.14), 0 36px 72px -28px rgba(11, 20, 51, 0.2);
  --sh-4: 0 2px 6px rgba(11, 20, 51, 0.05), 0 24px 48px -20px rgba(11, 20, 51, 0.22), 0 64px 120px -40px rgba(11, 20, 51, 0.26);

  /* motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* layout */
  --container: 1200px;
  --container-wide: 1360px;
  --gutter: clamp(20px, 4.2vw, 48px);
  --header-h: 68px;
  --section-y: clamp(80px, 8.4vw, 132px);
}

/* ---------- reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 24px);
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img,
svg,
video,
picture {
  display: block;
  max-width: 100%;
}
img {
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
/* hidden always wins over a component's own display (the demo form is display: grid, for one) */
[hidden] {
  display: none !important;
}
::selection {
  background: #ffe7a6;
  color: var(--ink);
}
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- utilities ---------- */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide {
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
}
.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus {
  transform: none;
}
.mono {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-feature-settings: 'calt' 0;
}
.tnum {
  font-variant-numeric: tabular-nums;
}

/* ---------- type ---------- */
.display,
.h1,
.h2,
.h3,
.h4 {
  color: var(--ink);
  font-weight: 700;
  text-wrap: balance;
}
.display {
  font-size: clamp(46px, 4.6vw + 22px, 92px);
  line-height: 0.99;
  letter-spacing: -0.045em;
}
.h1 {
  font-size: clamp(42px, 3.8vw + 20px, 80px);
  line-height: 1.01;
  letter-spacing: -0.042em;
}
.h2 {
  font-size: clamp(34px, 2.6vw + 18px, 60px);
  line-height: 1.04;
  letter-spacing: -0.038em;
}
.h3 {
  font-size: clamp(22px, 0.6vw + 17px, 27px);
  line-height: 1.22;
  letter-spacing: -0.022em;
  font-weight: 650;
}
.h4 {
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.014em;
  font-weight: 650;
}
.lead {
  font-size: clamp(18px, 0.35vw + 16.5px, 21px);
  line-height: 1.55;
  color: var(--slate);
  letter-spacing: -0.006em;
  text-wrap: pretty;
}
.body-l {
  font-size: 18px;
  line-height: 1.6;
  color: var(--slate);
  text-wrap: pretty;
}
p {
  text-wrap: pretty;
}
.accent-underline {
  background-image: linear-gradient(var(--brand-yellow), var(--brand-yellow));
  background-repeat: no-repeat;
  background-size: 100% 0.09em;
  background-position: 0 92%;
  padding-bottom: 0.02em;
}

/* eyebrow: the film's "— ALWAYS IN SYNC" */
.eyebrow {
  --c: var(--blue);
  --t: var(--blue-deep);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--t);
  font-size: 13px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-feature-settings: 'case' 1;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--c);
}
.eyebrow--red {
  --c: var(--red);
  --t: var(--red-deep);
}
.eyebrow--orange {
  --c: var(--orange);
  --t: var(--orange-deep);
}
.eyebrow--amber {
  --c: var(--amber);
  --t: var(--amber-deep);
}
.eyebrow--green {
  --c: var(--green);
  --t: var(--green-deep);
}
.eyebrow--violet {
  --c: var(--violet);
  --t: #5a43b5;
}
.eyebrow--light {
  --c: var(--brand-yellow);
  --t: var(--on-navy-2);
}
.eyebrow--violet-light {
  --c: #a48cf0;
  --t: var(--on-navy-2);
}

/* ---------- buttons ---------- */
.btn {
  --h: 48px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--h);
  padding: 0 22px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition:
    background-color 0.2s var(--ease),
    border-color 0.2s var(--ease),
    color 0.2s var(--ease),
    box-shadow 0.25s var(--ease),
    transform 0.25s var(--ease);
}
.btn svg {
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform 0.25s var(--ease);
}
.btn:hover svg {
  transform: translateX(3px);
}
.btn:active {
  transform: translateY(1px) scale(0.99);
}
.btn-sm {
  --h: 38px;
  padding: 0 16px;
  font-size: 14.5px;
}
.btn-lg {
  --h: 54px;
  padding: 0 28px;
  font-size: 16.5px;
}
.btn-primary {
  background: var(--ink);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 2px rgba(11, 20, 51, 0.24),
    0 8px 20px -8px rgba(11, 20, 51, 0.45);
}
.btn-primary:hover {
  background: #17224a;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 2px 4px rgba(11, 20, 51, 0.22),
    0 14px 28px -10px rgba(11, 20, 51, 0.5);
}
.btn-secondary {
  background: #fff;
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    0 1px 2px rgba(11, 20, 51, 0.05);
}
.btn-secondary:hover {
  box-shadow:
    inset 0 0 0 1px var(--line-3),
    0 6px 16px -8px rgba(11, 20, 51, 0.2);
}
.btn-light {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5);
}
.btn-light:hover {
  background: #f1f4fa;
}
.btn-ghost-light {
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}
.btn-ghost-light:hover {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--blue-deep);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.text-link svg {
  width: 15px;
  height: 15px;
  transition: transform 0.25s var(--ease);
}
.text-link:hover svg {
  transform: translateX(3px);
}
/* links that open in a new tab carry the up-right arrow */
.text-link .ext {
  width: 14px;
  height: 14px;
  opacity: 1;
}
.text-link:hover .ext {
  transform: translate(2px, -2px);
}

/* ---------- pills and chips (film UI) ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 550;
  letter-spacing: -0.01em;
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    0 1px 2px rgba(11, 20, 51, 0.04);
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c, var(--blue));
  flex: none;
}
.dot--aws {
  --c: #ff9900;
}
.dot--azure {
  --c: #2f80ed;
}
.dot--gcp {
  --c: #3d7ef0;
}
.dot--oci {
  --c: #d63b2b;
}
.dot--vsphere {
  --c: #4caf50;
}
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.tag--green {
  background: var(--green-tint);
  color: var(--green-deep);
}
.tag--blue {
  background: var(--blue-tint);
  color: var(--blue-deep);
}
.tag--red {
  background: var(--red-tint);
  color: var(--red-deep);
}
.tag--orange {
  background: var(--orange-tint);
  color: var(--orange-deep);
}
.tag--amber {
  background: var(--amber-tint);
  color: var(--amber-deep);
}
.tag--violet {
  background: var(--violet-tint);
  color: #5a43b5;
}
.tag--sm {
  height: 20px;
  margin-left: 8px;
  padding: 0 8px;
  font-size: 11.5px;
}
.tag--ink {
  background: var(--bg-3);
  color: var(--ink-2);
}
.live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 10px 0 9px;
  border-radius: 999px;
  background: var(--green-tint);
  color: var(--green-deep);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.12em;
}
.live::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 rgba(24, 168, 107, 0.5);
  animation: live 2.4s var(--ease) infinite;
}
@keyframes live {
  0% {
    box-shadow: 0 0 0 0 rgba(24, 168, 107, 0.45);
  }
  70%,
  100% {
    box-shadow: 0 0 0 7px rgba(24, 168, 107, 0);
  }
}

/* ---------- cards (film card language) ---------- */
.card {
  position: relative;
  background: #fff;
  border-radius: var(--r-l);
  box-shadow:
    inset 0 0 0 1px var(--line),
    var(--sh-2);
}
.ui-card {
  background: rgba(255, 255, 255, 0.97);
  border-radius: 16px;
  box-shadow:
    0 0 0 1px rgba(11, 20, 51, 0.07),
    0 2px 4px rgba(11, 20, 51, 0.04),
    0 14px 32px -12px rgba(11, 20, 51, 0.2);
  color: var(--ink);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ---------- header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  transition:
    background-color 0.35s var(--ease),
    box-shadow 0.3s var(--ease),
    -webkit-backdrop-filter 0.3s var(--ease),
    backdrop-filter 0.3s var(--ease);
}
.site-header::before {
  content: '';
  position: absolute;
  inset: 0 0 -10px 0;
  z-index: -1;
  background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0.9) 52%, rgba(255, 255, 255, 0));
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}
.site-header.is-scrolled::before,
.site-header.is-dark::before {
  opacity: 0;
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 1px 0 rgba(11, 20, 51, 0.07);
}
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
}
.brand {
  display: flex;
  align-items: center;
  flex: none;
  margin-right: auto;
  border-radius: 8px;
}
.brand img {
  height: 36px;
  width: auto;
}
.brand .logo-dark {
  display: none;
}
/* over dark sections the header turns to dark glass */
body:not(.menu-open) .site-header.is-dark {
  background: rgba(11, 20, 51, 0.72);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}
body:not(.menu-open) .site-header.is-dark .logo-light {
  display: none;
}
body:not(.menu-open) .site-header.is-dark .logo-dark {
  display: block;
}
body:not(.menu-open) .site-header.is-dark .nav a,
body:not(.menu-open) .site-header.is-dark .link-login {
  color: rgba(255, 255, 255, 0.92);
}
body:not(.menu-open) .site-header.is-dark .nav a:hover,
body:not(.menu-open) .site-header.is-dark .link-login:hover {
  background: rgba(255, 255, 255, 0.08);
}
body:not(.menu-open) .site-header.is-dark .btn-primary {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.5);
}
body:not(.menu-open) .site-header.is-dark .menu-toggle span,
body:not(.menu-open) .site-header.is-dark .menu-toggle span::before,
body:not(.menu-open) .site-header.is-dark .menu-toggle span::after {
  background: #fff;
}
.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 550;
  letter-spacing: -0.01em;
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease);
}
.nav a:hover {
  background: rgba(11, 20, 51, 0.045);
}
.nav a[aria-current] {
  color: var(--ink);
}
/* the current page, or (aria-current="true") the section it's in, such as Blog on every blog page */
.nav a[aria-current]::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--brand-yellow);
}
.ext {
  width: 10px;
  height: 10px;
  opacity: 0.45;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.link-login {
  height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 550;
  letter-spacing: -0.01em;
  transition: background-color 0.2s var(--ease);
}
.link-login:hover {
  background: rgba(11, 20, 51, 0.045);
}
.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
}
.menu-toggle span {
  position: relative;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: background-color 0.2s;
}
.menu-toggle span::before,
.menu-toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.3s var(--ease);
}
.menu-toggle span::before {
  transform: translateY(-6px);
}
.menu-toggle span::after {
  transform: translateY(6px);
}
.menu-open .menu-toggle span {
  background: transparent;
}
.menu-open .menu-toggle span::before {
  transform: rotate(45deg);
}
.menu-open .menu-toggle span::after {
  transform: rotate(-45deg);
}
.mobile-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 49;
  background: #fff;
  padding: 16px var(--gutter) 32px;
  display: flex;
  flex-direction: column;
  /* the page behind is locked (body.menu-open), so on a short screen (a phone held sideways) the menu scrolls */
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.25s var(--ease),
    transform 0.3s var(--ease),
    visibility 0s linear 0.3s;
}
.menu-open .mobile-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.25s var(--ease),
    transform 0.3s var(--ease),
    visibility 0s;
}
.menu-open .site-header {
  background: #fff;
  box-shadow: 0 1px 0 rgba(11, 20, 51, 0.07);
}
.mobile-menu nav {
  display: flex;
  flex-direction: column;
}
.mobile-menu nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.025em;
}
.mobile-menu nav a svg {
  width: 18px;
  height: 18px;
  color: var(--faint);
}
.mobile-menu .cta-row {
  margin-top: 28px;
  flex-direction: column;
  align-items: stretch;
}
.mobile-menu .btn {
  width: 100%;
}
body.menu-open {
  overflow: hidden;
}

/* On desktop the header's edges sit on the hero film's title column, 120 of 1920 px (6.25%) in from the film's
   edge. On the home page the film is as wide as the screen height allows (see .film), so the header follows its
   exact size; other pages use 6.25% of the width, never inset past the content's edge. */
@media (min-width: 961px) {
  .header-inner {
    max-width: none;
    padding-inline: max(var(--gutter), min(6.25%, (100% - var(--container)) / 2));
  }
  /* capped at 50% - 430px so the centred nav (about 310 px) and the actions (about 240 px) always fit, even when a
     short window makes the film narrow */
  .page-home .header-inner {
    --fw: min(100%, calc((100vh - 12px) * 16 / 9));
    padding-inline: max(var(--gutter), min(50% - 430px, (100% - var(--fw)) / 2 + var(--fw) * 0.0625));
  }
  @supports (height: 100svh) {
    .page-home .header-inner {
      --fw: min(100%, calc((100svh - 12px) * 16 / 9));
    }
  }
}

/* ---------- reveal on scroll ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity 0.9s var(--ease-out),
    transform 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.js [data-reveal='fade'] {
  transform: none;
}
.js [data-reveal='scale'] {
  transform: translate3d(0, 28px, 0) scale(0.97);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .live::before {
    animation: none;
  }
}

/* ---------- section scaffolding ---------- */
.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--tight {
  padding-block: clamp(72px, 8vw, 120px);
}
.section-head {
  max-width: 760px;
}
.section-head .eyebrow {
  margin-bottom: 22px;
}
.section-head .lead {
  margin-top: 22px;
  max-width: 640px;
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head--center .lead {
  margin-inline: auto;
}
.hairline {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 0;
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow-x: clip;
}
.hero-floor {
  position: absolute;
  inset: 0 0 auto 0;
  height: 900px;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='207.85' height='120' viewBox='0 0 207.85 120'%3E%3Cpath d='M0 0 L207.85 120 M207.85 0 L0 120' stroke='%23e3e0da' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-size: 207.85px 120px;
  background-position: 50% -6px;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 30%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 30%, #000 0%, rgba(0, 0, 0, 0.55) 45%, transparent 78%);
  opacity: 0.55;
}
.hero-copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: clamp(36px, 4.4vw, 72px);
  text-align: center;
}
.announce {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 14px 0 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 550;
  letter-spacing: -0.01em;
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    0 2px 10px -4px rgba(11, 20, 51, 0.12);
  transition: box-shadow 0.25s var(--ease);
}
.announce:hover {
  box-shadow:
    inset 0 0 0 1px var(--line-3),
    0 8px 20px -8px rgba(11, 20, 51, 0.2);
}
.announce-tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.announce .short {
  display: none;
}
@media (max-width: 480px) {
  .announce .short {
    display: inline;
  }
}
.announce svg {
  width: 14px;
  height: 14px;
  color: var(--muted);
  transition: transform 0.25s var(--ease);
}
.announce:hover svg {
  transform: translateX(3px);
}
.hero h1 {
  margin-top: 28px;
  max-width: 13ch;
}
.hero .lead {
  margin-top: 24px;
  max-width: 45em;
  font-size: clamp(18px, 0.45vw + 16px, 21px);
  text-wrap: balance;
}
.hero .cta-row {
  margin-top: 32px;
  justify-content: center;
}
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  margin-top: 26px;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 500;
}
.hero-proof li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-proof svg {
  width: 16px;
  height: 16px;
  color: var(--green);
}

/* the film */
/* The film opens the page. It is as large as the screen allows without cropping (its titles sit in the left
   column, so it is never cropped to fill), and it keeps its top 58 of 1080 px clear so 3.02% of its width can tuck
   under the header. */
.film {
  --fit: calc((100vh - 12px) * 16 / 9);
  position: relative;
  z-index: 1;
  width: min(100%, var(--fit));
  margin: max(0px, calc(var(--header-h) - min(3.02%, var(--fit) * 0.0302))) auto 0;
}
@supports (height: 100svh) {
  .film {
    --fit: calc((100svh - 12px) * 16 / 9);
  }
}
.film-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #fff url('../film/cloudcraft-loop-first.jpg') center / cover no-repeat;
  background-image: image-set(url('../film/cloudcraft-loop-first.avif') type('image/avif'), url('../film/cloudcraft-loop-first.jpg') type('image/jpeg'));
}
/* until the video's first frame decodes, its transparent box shows the same frame from the background */
.film-media,
.film-video {
  display: block;
  width: 100%;
  height: 100%;
}
.film-video {
  object-fit: cover;
}
/* iOS draws its own play button over a video it won't autoplay (Low Power Mode); the still and the toggle cover that */
.film-video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}
.film-still {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  pointer-events: none;
}
.film-still img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.film.is-still .film-still {
  opacity: 1;
}
.film-toggle {
  position: absolute;
  right: clamp(10px, 2.2%, 40px);
  bottom: clamp(10px, 2.6%, 40px);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    0 4px 12px -4px rgba(11, 20, 51, 0.2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0.7;
  transition:
    opacity 0.2s var(--ease),
    transform 0.2s var(--ease);
}
.film-toggle:hover,
.film-toggle:focus-visible {
  opacity: 1;
}
.film-toggle svg {
  width: 14px;
  height: 14px;
}
.film-toggle .i-play {
  display: none;
}
.film.is-paused .film-toggle .i-play {
  display: block;
}
.film.is-paused .film-toggle .i-pause {
  display: none;
}
.film.is-static .film-toggle {
  display: none;
}
/* under reduced motion the film's sources don't match, and the frame shows the headline still */
@media (prefers-reduced-motion: reduce) {
  .film-frame {
    background-image: url('../film/cloudcraft-loop-poster.jpg');
    background-image: image-set(url('../film/cloudcraft-loop-poster.avif') type('image/avif'), url('../film/cloudcraft-loop-poster.jpg') type('image/jpeg'));
  }
  .film-video {
    visibility: hidden;
  }
  .film-toggle {
    display: none;
  }
}

/* ---------- logo wall ---------- */
.logos {
  padding: clamp(48px, 6vw, 88px) 0 clamp(64px, 7vw, 104px);
}
.logos-title {
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  font-weight: 550;
  letter-spacing: -0.005em;
}
.logo-wall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 3vw, 40px) clamp(36px, 4.6vw, 68px);
  max-width: 1080px;
  margin: clamp(28px, 3.4vw, 44px) auto 0;
}
.logo-wall li {
  display: grid;
  place-items: center;
  height: 44px;
}
.logo-wall .logo-break {
  flex-basis: 100%;
  height: 0;
}
.logo-wall img {
  height: var(--h, 28px);
  width: auto;
  opacity: 0.5;
  transition: opacity 0.3s var(--ease);
}
.logo-wall li:hover img {
  opacity: 0.85;
}

/* ---------- statement ---------- */
.statement {
  padding-block: clamp(56px, 7vw, 112px) clamp(80px, 9vw, 140px);
}
.statement p {
  max-width: 1040px;
  margin-inline: auto;
  color: var(--ink);
  font-size: clamp(28px, 2.4vw + 14px, 50px);
  line-height: 1.16;
  letter-spacing: -0.032em;
  font-weight: 650;
  text-align: center;
  text-wrap: balance;
}
.statement p + p {
  margin-top: 0.7em;
}
.js .statement .w {
  color: #c4cad6;
  transition: color 0.5s var(--ease);
}
.js .statement .w.on {
  color: var(--ink);
}
.statement .hl-logs.on {
  color: var(--red);
}
.statement .hl-sec.on {
  color: var(--orange);
}
.statement .hl-cost.on {
  color: var(--amber);
}
.statement .hl-alerts.on {
  color: var(--violet);
}
@media (prefers-reduced-motion: reduce) {
  .js .statement .w {
    color: var(--ink);
    transition: none;
  }
}

/* ---------- bento (home) ---------- */
.bento {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: clamp(48px, 5.6vw, 80px);
}
.bento .card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.bento-copy {
  padding: clamp(28px, 3vw, 44px);
}
.bento-copy .h3 {
  margin-top: 18px;
  max-width: 22ch;
}
/* a one-sentence card heading, without a paragraph under it */
.bento-copy .bento-statement {
  max-width: none;
  font-size: clamp(20px, 0.45vw + 16.5px, 23px);
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: -0.017em;
}
.bento-copy p {
  margin-top: 14px;
  color: var(--slate);
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 46ch;
}
.bento-visual {
  position: relative;
  flex: 1;
  min-height: 280px;
}
.bento-visual > picture,
.bento-visual > picture img {
  width: 100%;
  height: 100%;
}
.bento-visual > picture img {
  object-fit: cover;
}
.card--wide {
  grid-column: 1 / -1;
  display: grid !important;
  grid-template-columns: minmax(320px, 0.78fr) 1.4fr;
  min-height: 520px;
}
.card--wide .bento-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 8px;
}
.card--wide .bento-visual {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16%);
}
.card--tall .bento-visual {
  flex: none;
  min-height: 0;
  aspect-ratio: 600 / 410;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 100%);
  order: -1;
}
.card--tall .bento-copy {
  padding-top: 8px;
}

/* overlays pinned onto product imagery: positions are % of the visual */
.pin {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: #fff;
  box-shadow:
    0 0 0 2px #fff,
    0 6px 14px -6px rgba(11, 20, 51, 0.45);
}
.pill--green {
  background: var(--green-deep);
}
.pill--blue {
  background: var(--blue);
}
.pill--gray {
  background: #4e5878;
}
.pill--red {
  background: var(--red);
}
.js .pin[data-pop] {
  opacity: 0;
  transform: translate(-50%, -30%) scale(0.85);
  transition:
    opacity 0.5s var(--ease-out),
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.js .is-in .pin[data-pop] {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.activity-inline {
  margin-top: 28px;
  padding: 16px 18px 4px;
  max-width: 400px;
}
.activity-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.activity li {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 10px;
  align-items: start;
  padding: 12px 0;
  font-size: 13.5px;
  line-height: 1.35;
}
.activity li + li {
  border-top: 1px solid var(--line);
}
.activity-inline ul {
  margin: 0;
}
.activity-inline li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px 0;
  font-size: 13.5px;
  line-height: 1.35;
}
.activity-inline li + li {
  border-top: 1px solid var(--line);
}
.activity-inline small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-inline small.mono {
  font-size: 11.5px;
}
.activity-inline b {
  display: block;
  color: var(--ink);
  font-weight: 650;
  letter-spacing: -0.01em;
}
.activity-inline time {
  color: var(--green-deep);
  font-size: 12px;
  font-weight: 650;
  padding-top: 1px;
}
.activity .ico,
.activity-inline .ico {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green-tint);
  color: var(--green-deep);
}
.activity-inline .ico svg,
.activity .ico svg {
  width: 14px;
  height: 14px;
}
.activity-inline .ico--blue {
  background: var(--blue-tint);
  color: var(--blue-deep);
}
.activity-inline .ico--gray {
  background: var(--bg-3);
  color: #4e5878;
}
.activity b {
  display: block;
  color: var(--ink);
  font-weight: 650;
  letter-spacing: -0.01em;
}
.activity small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12.5px;
}
.activity time {
  color: var(--green-deep);
  font-size: 12px;
  font-weight: 650;
}

.logcard--mini {
  left: clamp(12px, 3.5%, 22px);
  right: auto;
  bottom: clamp(12px, 5%, 22px);
  width: min(318px, 58%);
  padding: 12px 14px 10px;
}
.logcard--mini .q-token--err {
  flex: none;
}
.logcard--mini .logcard-q {
  padding: 6px 8px;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.logcard--mini .q-token {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.logcard--mini .logcard-meta {
  margin: 8px 2px 6px;
  font-size: 12px;
}
.logcard--mini .logline {
  grid-template-columns: 1fr;
  font-size: 11.5px;
}
.logcard--mini .logline .t::after {
  content: ' · ';
  color: var(--faint);
}
.logcard--mini .logline .t,
.logcard--mini .logline .s {
  display: inline;
}
.logcard--mini .logline .ts {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.logcard {
  position: absolute;
  z-index: 3;
  left: clamp(14px, 5%, 32px);
  right: clamp(14px, 5%, 32px);
  bottom: clamp(14px, 6%, 28px);
  padding: 14px 16px 10px;
}
.logcard-q {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 12.5px;
}
.logcard-q svg {
  width: 14px;
  height: 14px;
  color: var(--muted);
  flex: none;
}
.q-token {
  padding: 2px 7px;
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink-2);
  white-space: nowrap;
}
.q-token--err {
  background: var(--red-tint);
  box-shadow: none;
  color: var(--red-deep);
}
.logcard-meta {
  margin: 10px 2px 6px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 550;
}
.logline {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  padding: 6px 0 6px 10px;
  border-left: 2px solid var(--red);
  font-size: 12px;
  line-height: 1.45;
}
.logline + .logline {
  margin-top: 6px;
}
.logline .t {
  color: var(--muted);
}
.logline .s {
  color: var(--ink-2);
}
.logline .m {
  grid-column: 1 / -1;
  color: var(--ink);
}

.statchip {
  position: absolute;
  z-index: 3;
  right: clamp(14px, 4%, 28px);
  top: clamp(14px, 6%, 28px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
}
.statchip .num {
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
}
.statchip .lbl {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 550;
}
.statchip .sep {
  width: 1px;
  align-self: stretch;
  background: var(--line);
}

/* ---------- overlay switcher (home) ---------- */
.switcher {
  background: linear-gradient(180deg, #fff 0, var(--bg-2) 18%, var(--bg-2) 82%, #fff 100%);
  overflow: hidden;
}
.switcher-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    0 6px 20px -10px rgba(11, 20, 51, 0.18);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
.switcher-tabs::-webkit-scrollbar {
  display: none;
}
.switcher-nav {
  display: flex;
  justify-content: center;
  margin-top: clamp(36px, 4vw, 56px);
}
.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 18px 0 15px;
  border-radius: 999px;
  color: var(--slate);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  transition:
    color 0.2s var(--ease),
    background-color 0.25s var(--ease);
}
.tab .dot {
  width: 7px;
  height: 7px;
  opacity: 0.55;
  transition: opacity 0.2s;
}
.tab:hover {
  color: var(--ink);
}
.tab[aria-selected='true'] {
  color: var(--ink);
  background: var(--bg-3);
}
.tab[aria-selected='true'] .dot {
  opacity: 1;
}
.tab .bar {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
}
.tab[aria-selected='true'] .bar {
  opacity: 1;
  transform: scaleX(var(--p, 1));
}
.tab--infra {
  --c: var(--blue);
}
.tab--logs {
  --c: var(--red);
}
.tab--cost {
  --c: var(--amber);
}
.tab--sec {
  --c: var(--orange);
}
.tab--res {
  --c: var(--violet);
}
.switcher-stage {
  position: relative;
  margin: clamp(28px, 3.2vw, 44px) auto 0;
  max-width: 1240px;
}
.app-window {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: clamp(10px, 1.1vw, 16px);
  overflow: hidden;
  background: #2a2e39;
  box-shadow:
    0 0 0 1px rgba(11, 20, 51, 0.1),
    var(--sh-4);
}
.app-window .pane,
.app-window picture,
.app-window img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.app-window .pane {
  opacity: 0;
  transition: opacity 0.6s var(--ease-in-out);
}
.app-window .pane.is-active {
  opacity: 1;
}
.app-window .pane:focus-visible {
  outline-offset: -3px;
}
.switcher-captions {
  position: relative;
  display: grid;
  margin: clamp(24px, 3vw, 36px) auto 0;
  max-width: 760px;
  text-align: center;
}
.caption {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.4s var(--ease),
    transform 0.5s var(--ease);
  pointer-events: none;
}
.caption.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.caption p {
  color: var(--slate);
  font-size: 18px;
  line-height: 1.55;
}
.caption p strong {
  color: var(--ink);
  font-weight: 650;
}

/* ---------- capabilities ---------- */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(48px, 5vw, 72px);
  border-top: 1px solid var(--line);
}
.cap {
  padding: clamp(28px, 3vw, 40px) clamp(20px, 2.6vw, 36px) clamp(32px, 3.4vw, 44px) 0;
  border-bottom: 1px solid var(--line);
}
.cap:not(:nth-child(3n + 1)) {
  padding-left: clamp(20px, 2.6vw, 36px);
  border-left: 1px solid var(--line);
}
.cap-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--tint, var(--blue-tint));
  color: var(--c, var(--blue));
}
.cap-icon svg {
  width: 24px;
  height: 24px;
}
.cap h3 {
  margin-top: 22px;
}
.cap p {
  margin-top: 10px;
  color: var(--slate);
  font-size: 16px;
  line-height: 1.6;
}

/* ---------- dark section ---------- */
.dark {
  background: var(--navy);
  color: var(--on-navy-2);
  overflow: hidden;
  isolation: isolate;
}
.dark .h2,
.dark .h3,
.dark .h4 {
  color: #fff;
}
.dark .lead {
  color: var(--on-navy-2);
}
.dark-art {
  position: absolute;
  inset: auto 0 0 0;
  z-index: -1;
  height: clamp(320px, 46vw, 720px);
  pointer-events: none;
}
.dark-art picture,
.dark-art img {
  width: 100%;
  height: 100%;
}
.dark-art img {
  object-fit: cover;
  object-position: 50% 100%;
}
.dark-art::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, var(--navy) 0%, rgba(11, 20, 51, 0.55) 30%, rgba(11, 20, 51, 0) 60%);
}
.dark-glow {
  position: absolute;
  z-index: -1;
  width: 900px;
  height: 600px;
  left: 50%;
  top: -260px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(66, 134, 197, 0.22), transparent);
  pointer-events: none;
}
.dd-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.steps {
  display: grid;
  gap: 0;
  counter-reset: step;
}
.step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 4px 18px;
  padding: 26px 0;
  border-top: 1px solid var(--navy-line);
}
.step:last-child {
  border-bottom: 1px solid var(--navy-line);
}
.step-n {
  grid-row: span 2;
  color: var(--brand-yellow);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.04em;
  padding-top: 4px;
}
.step h3 {
  color: #fff;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.step p {
  color: var(--on-navy-3);
  font-size: 16px;
  line-height: 1.6;
}
.providers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 36px;
}
.dark .chip {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.dark-note {
  margin-top: 18px;
  color: var(--on-navy-3);
  font-size: 14px;
}
.dark-spacer {
  height: clamp(220px, 31vw, 520px);
}

/* ---------- agents (dark): the real app in dark mode, with Bits AI ---------- */
.agents {
  padding-bottom: clamp(88px, 9vw, 144px);
}
.agents-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* the Neon look's own light: violet trails on the left, blue paths on the right */
  background:
    radial-gradient(50% 38% at 28% 66%, rgba(123, 97, 216, 0.3), transparent 72%),
    radial-gradient(42% 36% at 76% 74%, rgba(47, 111, 208, 0.26), transparent 72%),
    radial-gradient(70% 40% at 50% 0%, rgba(66, 134, 197, 0.12), transparent 70%);
}
.agents-bg::before {
  /* a faint isometric floor grid, like the diagram's */
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='207.85' height='120' viewBox='0 0 207.85 120'%3E%3Cpath d='M0 0 L207.85 120 M207.85 0 L0 120' stroke='%23ffffff' stroke-width='1' fill='none' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  background-size: 207.85px 120px;
  background-position: 50% 0;
  opacity: 0.045;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 55%, #000 20%, transparent 80%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 55%, #000 20%, transparent 80%);
}
.agents-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px clamp(32px, 5vw, 80px);
  align-items: end;
}
.agents-head .h2 {
  margin-top: 22px;
}
.agents-head .lead {
  max-width: 34em;
}
.agents-head .lead strong {
  color: #fff;
  font-weight: 600;
}
.agents-head .text-link {
  margin-top: 18px;
  color: #b9acff;
}
.agents-head .text-link:hover {
  color: #fff;
}
.agents-shot {
  position: relative;
  margin-top: clamp(44px, 5vw, 76px);
}
.agents-window {
  position: relative;
  border-radius: clamp(10px, 1vw, 16px);
  overflow: hidden;
  background: #1d1c1f;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 2px 0 0 rgba(255, 255, 255, 0.04) inset,
    0 40px 100px -30px rgba(0, 0, 0, 0.7),
    0 0 160px -40px rgba(123, 97, 216, 0.55);
}
.agents-window img {
  width: 100%;
}
.agents-panel {
  display: none;
}
@media (max-width: 960px) {
  .agents-head {
    grid-template-columns: minmax(0, 1fr);
  }
  /* narrow screens: the diagram in the window, and the Bits AI panel over it as a card at a readable size */
  .agents-panel {
    display: block;
    position: relative;
    z-index: 2;
    width: min(56%, 460px);
    margin: -34% 3% 0 auto;
    border-radius: 12px;
    overflow: hidden;
    background: #1d1c1f;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.14),
      0 30px 60px -18px rgba(0, 0, 0, 0.8),
      0 0 80px -20px rgba(123, 97, 216, 0.5);
  }
  .agents-panel img {
    width: 100%;
  }
}
@media (max-width: 640px) {
  .agents-panel {
    width: 86%;
    margin-top: -26%;
    margin-right: 0;
  }
}

/* ---------- final CTA ---------- */
.final-cta {
  position: relative;
  padding-top: var(--section-y);
  text-align: center;
  isolation: isolate;
  overflow: hidden;
}
.final-cta .h2 {
  max-width: 17ch;
  margin-inline: auto;
}
.final-cta .lead {
  margin: 22px auto 0;
  max-width: 34em;
}
.final-cta .cta-row {
  justify-content: center;
  margin-top: 34px;
}
.final-art {
  position: relative;
  z-index: -1;
  margin-top: clamp(-72px, -4vw, -16px);
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
}
.final-art img {
  width: 100%;
  aspect-ratio: 12 / 5;
  object-fit: cover;
}

/* ---------- footer ---------- */
.site-footer {
  position: relative;
  padding: clamp(56px, 6vw, 88px) 0 40px;
  border-top: 1px solid var(--line);
  background: #fff;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 32px;
}
.footer-brand img {
  height: 34px;
  width: auto;
}
.footer-brand p {
  margin-top: 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  max-width: 30ch;
}
.footer-col h2 {
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.005em;
}
.footer-col ul {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}
.footer-col a {
  color: var(--slate);
  font-size: 14.5px;
  line-height: 1.4;
  transition: color 0.2s var(--ease);
}
.footer-col a:hover {
  color: var(--ink);
}
/* Your Privacy Choices, Datadog's snippet as supplied: it colours its link white inline, and its icon is white, both
   made for a dark footer. Here the link takes the footer's link colour and the icon the official privacy-choices blue. */
.footer-col #open-consent-preferences {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--slate) !important;
}
.footer-col #open-consent-preferences:hover {
  color: var(--ink) !important;
}
.footer-col #open-consent-preferences img {
  width: 24px;
  height: auto;
  filter: brightness(0) saturate(100%) invert(25%) sepia(94%) saturate(4520%) hue-rotate(213deg) brightness(101%) contrast(108%);
}
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: clamp(48px, 5vw, 72px);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13.5px;
}
.footer-base .nyc {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.footer-base .nyc svg {
  width: 14px;
  height: 14px;
  color: var(--ink);
}

/* ---------- page hero (inner pages) ---------- */
.page-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(56px, 7vw, 112px));
  isolation: isolate;
}
.page-hero .eyebrow {
  margin-bottom: 26px;
}
.page-hero .lead {
  margin-top: 26px;
  max-width: 38em;
}

/* ---------- solutions ---------- */
.chapter-index {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(48px, 5vw, 76px);
}
.chapter-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-l);
  background: #fff;
  box-shadow:
    inset 0 0 0 1px var(--line),
    var(--sh-1);
  overflow: hidden;
  transition:
    box-shadow 0.35s var(--ease),
    transform 0.35s var(--ease);
}
.chapter-card:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    var(--sh-3);
}
.chapter-card picture {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.chapter-card picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 0.9s var(--ease-out);
}
.chapter-card:hover picture img {
  transform: scale(1.09);
}
.chapter-card-copy {
  padding: 4px 22px 22px;
}
.chapter-card h2 {
  margin-top: 6px;
  color: var(--t, var(--ink));
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.chapter-card p {
  margin-top: 6px;
  color: var(--slate);
  font-size: 14.5px;
  line-height: 1.5;
}
.chapter-card .go {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.9);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 4px 10px -4px rgba(11, 20, 51, 0.2);
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 0.3s var(--ease),
    transform 0.3s var(--ease);
}
.chapter-card .go svg {
  width: 15px;
  height: 15px;
  transform: rotate(90deg);
}
.chapter-card:hover .go,
.chapter-card:focus-visible .go {
  opacity: 1;
  transform: none;
}

.chapter {
  position: relative;
  padding-block: clamp(80px, 9vw, 140px);
}
.chapter + .chapter {
  border-top: 1px solid var(--line);
}
.chapter-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(32px, 4.6vw, 72px);
  align-items: center;
}
.chapter--flip .chapter-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
}
.chapter--flip .chapter-copy {
  order: 2;
}
.chapter-copy .h2 {
  margin-top: 22px;
  font-size: clamp(32px, 2vw + 18px, 52px);
}
.chapter-copy .lead {
  margin-top: 20px;
}
.ticks {
  display: grid;
  gap: 14px;
  margin-top: 30px;
}
.ticks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  color: var(--body);
  font-size: 16.5px;
  line-height: 1.55;
}
.ticks li strong {
  color: var(--ink);
  font-weight: 650;
}
.ticks svg {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--c, var(--blue));
}
.chapter-visual {
  position: relative;
  margin-right: calc(var(--gutter) * -1 - max(0px, (100vw - var(--container) - var(--gutter) * 2) / 2));
}
.chapter--flip .chapter-visual {
  margin-right: 0;
  margin-left: calc(var(--gutter) * -1 - max(0px, (100vw - var(--container) - var(--gutter) * 2) / 2));
}
.plate {
  position: relative;
  aspect-ratio: 980 / 675;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 10%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
.plate picture,
.plate img {
  width: 100%;
  height: 100%;
}
.plate img {
  object-fit: cover;
}
.chapter-visual .ui-card {
  position: absolute;
  z-index: 3;
}
.finding {
  left: 4%;
  bottom: 2%;
  width: min(400px, 64%);
  padding: 18px 20px 20px;
}
.finding-top {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 550;
}
.sev {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: #c8331b;
  color: #fff;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.06em;
}
.finding h3 {
  margin-top: 12px;
  color: var(--ink);
  font-size: 16.5px;
  font-weight: 650;
  letter-spacing: -0.015em;
  line-height: 1.35;
}
.finding .lbl {
  margin-top: 16px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
}
.path span {
  padding: 4px 9px;
  border-radius: 7px;
  background: var(--bg-3);
  color: var(--ink-2);
}
.path span:last-child {
  background: var(--red-tint);
  color: var(--red-deep);
}
.path i {
  color: var(--faint);
  font-style: normal;
  font-size: 12px;
}
.attack {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.attack-trace path {
  fill: none;
  stroke: var(--red);
  stroke-width: 2.2;
  stroke-dasharray: 7 6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  animation: march 1.4s linear infinite;
}
/* Rings around the hops, open in the middle so the resource stays visible. */
.attack-hop,
.attack-target,
.attack-pulse {
  stroke: var(--red);
  vector-effect: non-scaling-stroke;
}
.attack-hop {
  fill: rgba(214, 41, 63, 0.08);
  stroke-width: 2;
}
.attack-target {
  fill: rgba(214, 41, 63, 0.16);
  stroke-width: 2.6;
}
.attack-pulse {
  fill: none;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
  animation: target 2.2s var(--ease) infinite;
}
@keyframes march {
  to {
    stroke-dashoffset: -26;
  }
}
@keyframes target {
  0% {
    opacity: 0.8;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(2.1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .attack-trace path {
    animation: none;
  }
  .attack-pulse {
    display: none;
  }
}
.internet {
  position: absolute;
  z-index: 3;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  gap: 4px;
  color: var(--red-deep);
  font-size: 12.5px;
  font-weight: 700;
}
.internet span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  box-shadow:
    0 0 0 2px var(--red),
    0 6px 14px -6px rgba(214, 41, 63, 0.5);
}
.internet svg {
  width: 16px;
  height: 16px;
  color: var(--red);
}
.costcard {
  right: 6%;
  bottom: 3%;
  width: min(380px, 62%);
  padding: 18px 20px 14px;
}
.chapter--flip .costcard {
  right: auto;
  left: 6%;
}
.costcard .lbl,
.embed .lbl {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.costcard .big {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
}
.costcard .big b {
  color: var(--ink);
  font-size: 34px;
  font-weight: 750;
  letter-spacing: -0.04em;
  line-height: 1;
}
.costcard .big small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 550;
}
.costrows {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}
.costrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px auto;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
}
.costrow .n {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}
.costrow .n small {
  display: block;
  color: var(--muted);
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
}
.costrow .b {
  height: 6px;
  border-radius: 6px;
  background: var(--bg-3);
  overflow: hidden;
}
.costrow .b i {
  display: block;
  height: 100%;
  width: var(--w);
  border-radius: 6px;
  background: var(--c, var(--amber));
}
.costrow .v {
  color: var(--ink);
  font-weight: 700;
  text-align: right;
  min-width: 64px;
}
.chapter-visual .logcard {
  left: 4%;
  right: auto;
  bottom: 3%;
  width: min(420px, 66%);
}
.embed {
  left: 5%;
  bottom: 6%;
  width: min(330px, 56%);
  padding: 16px 18px 18px;
}
.embed .row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.embed .row + .lbl {
  display: block;
  margin-top: 16px;
}

.integrations {
  padding-block: clamp(80px, 9vw, 136px);
  text-align: center;
  background: linear-gradient(180deg, #fff, var(--bg-2));
  border-top: 1px solid var(--line);
}
.integrations .h2 {
  max-width: 22ch;
  margin-inline: auto;
  font-size: clamp(30px, 2vw + 16px, 48px);
}
.integrations .providers {
  justify-content: center;
}
.integrations .cta-row {
  justify-content: center;
  margin-top: 40px;
}

/* solutions: hero, notes, callouts on the plates */
.page-hero-head {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: 28px clamp(32px, 5vw, 80px);
  align-items: end;
}
.page-hero-head .lead {
  margin-top: 0;
  padding-bottom: 0.4em;
}
.sol-title {
  max-width: 15ch;
}
.page-hero .chapter-index {
  margin-top: clamp(56px, 6vw, 88px);
}
.chapter-visual .logcard--ch {
  left: 4%;
  bottom: 4%;
  width: min(430px, 50%);
}
.logcard--ch .logline {
  grid-template-columns: auto 1fr;
}
.logcard--ch .logline .m {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finding {
  left: 6%;
  bottom: 4%;
  width: min(392px, 42%);
}
.costcard {
  left: 4%;
  right: auto;
  bottom: 5%;
  width: min(390px, 46%);
}
.embed {
  left: 7%;
  top: 7%;
  bottom: auto;
  width: min(300px, 32%);
}
.plate--wide {
  aspect-ratio: 1250 / 717;
}
/* ---------- pricing ---------- */
.price-hero {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(56px, 7vw, 104px));
  text-align: center;
  isolation: isolate;
}
.price-hero .h1 {
  max-width: 14ch;
  margin-inline: auto;
}
.price-hero .lead {
  margin: 24px auto 0;
  max-width: 36em;
}
.price-hero .cta-row {
  justify-content: center;
  margin-top: 34px;
}
.plan-stage {
  position: relative;
  isolation: isolate;
  margin-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(110px, 13vw, 210px);
}
.price-field {
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 4%;
  bottom: 0;
  max-width: 1920px;
  margin-inline: auto;
  pointer-events: none;
}
.price-field picture,
.price-field img {
  width: 100%;
  height: 100%;
}
.price-field img {
  object-fit: cover;
  object-position: 50% 100%;
}
.plan-wrap {
  position: relative;
  z-index: 2;
}
.plan {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  max-width: 1040px;
  margin-inline: auto;
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow:
    0 0 0 1px rgba(11, 20, 51, 0.08),
    var(--sh-4);
  overflow: hidden;
  text-align: left;
}
.plan-main {
  padding: clamp(32px, 4vw, 52px);
  border-right: 1px solid var(--line);
}
.plan-name {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
}
.plan-name img {
  width: 26px;
  height: 26px;
}
.price {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin-top: 26px;
}
.price b {
  color: var(--ink);
  font-size: clamp(72px, 6vw, 96px);
  font-weight: 750;
  letter-spacing: -0.055em;
  line-height: 0.82;
}
.price span {
  color: var(--slate);
  font-size: 15px;
  line-height: 1.35;
  padding-bottom: 4px;
}
.plan-main > p {
  margin-top: 22px;
  color: var(--slate);
  font-size: 16.5px;
}
.plan-main .btn {
  margin-top: 28px;
  width: 100%;
}
.plan-main .fine {
  margin-top: 14px;
  color: var(--muted);
  font-size: 13.5px;
  text-align: center;
}
.plan-list {
  padding: clamp(32px, 4vw, 52px);
  background: linear-gradient(180deg, rgba(247, 248, 251, 0.7), rgba(255, 255, 255, 0.7));
}
.plan-list h2 {
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
}
.plan-list ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 24px;
  margin-top: 22px;
}
.plan-list li {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  color: var(--body);
  font-size: 15.5px;
  line-height: 1.45;
}
.plan-list li svg {
  width: 20px;
  height: 20px;
  color: var(--green);
}
.unlimited {
  display: flex;
  gap: 10px;
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.unlimited div {
  flex: 1;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
}
.unlimited b {
  display: block;
  color: var(--ink);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.unlimited span {
  color: var(--muted);
  font-size: 13.5px;
}

.overlay-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
  margin-top: clamp(48px, 5vw, 72px);
}
.overlay-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.overlay-card picture {
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.overlay-card picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.overlay-card-copy {
  padding: 24px 26px 28px;
}
.overlay-card .h4 {
  margin-top: 16px;
}
.overlay-card p {
  margin-top: 8px;
  color: var(--slate);
  font-size: 15.5px;
  line-height: 1.55;
}
.overlay-card .needs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
}
.overlay-card .needs span {
  color: var(--muted);
  font-weight: 500;
}

.matrix-wrap {
  margin-top: clamp(56px, 6vw, 88px);
  border-radius: var(--r-l);
  box-shadow:
    inset 0 0 0 1px var(--line),
    var(--sh-1);
  overflow: hidden;
  overflow-x: auto;
}
.matrix {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 15px;
}
.matrix caption {
  text-align: left;
  padding: 22px 26px;
  color: var(--ink);
  font-weight: 650;
  font-size: 16px;
  border-bottom: 1px solid var(--line);
}
.matrix th,
.matrix td {
  padding: 16px 14px;
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.matrix tr:last-child th,
.matrix tr:last-child td {
  border-bottom: 0;
}
.matrix thead th {
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
  background: var(--bg-2);
  vertical-align: bottom;
}
.matrix thead th small {
  display: block;
  color: var(--slate);
  font-weight: 550;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 3px;
}
.matrix tbody th {
  text-align: left;
  color: var(--ink-2);
  font-weight: 600;
  white-space: nowrap;
  padding-left: 26px;
}
.matrix-m {
  display: none;
}
.matrix .yes svg {
  width: 20px;
  height: 20px;
  margin: 0 auto;
  color: var(--green);
}
.matrix .no {
  color: var(--line-3);
}
.matrix td.col-hl,
.matrix th.col-hl {
  background: rgba(234, 241, 252, 0.45);
}

/* the table has seven columns and needs about 1,000 px; narrower screens get it as a stacked list */
@media (max-width: 1100px) {
  .matrix {
    display: none;
  }
  .matrix-wrap {
    overflow: hidden;
  }
  .matrix-m {
    display: block;
  }
  .matrix-m h3 {
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-size: 15px;
    font-weight: 650;
  }
  .matrix-m li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
  }
  .matrix-m li:last-child {
    border-bottom: 0;
  }
  .matrix-m b {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    color: var(--ink-2);
    font-weight: 600;
  }
  /* the gap spaces the pill, so a pill that wraps lines up with the label */
  .matrix-m .tag--sm {
    margin-left: 0;
  }
  .matrix-m li > span {
    color: var(--slate);
    text-align: right;
  }
}
.faq {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.faq-list {
  border-top: 1px solid var(--line);
}
.faq-list details {
  border-bottom: 1px solid var(--line);
}
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  cursor: pointer;
  list-style: none;
  color: var(--ink);
  font-size: 18px;
  font-weight: 620;
  letter-spacing: -0.018em;
  line-height: 1.4;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary .pm {
  position: relative;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition:
    background-color 0.2s var(--ease),
    transform 0.35s var(--ease);
}
.faq-list summary .pm::before,
.faq-list summary .pm::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 1.6px;
  margin: -0.8px 0 0 -5px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.35s var(--ease);
}
.faq-list summary .pm::after {
  transform: rotate(90deg);
}
.faq-list details[open] summary .pm {
  background: var(--ink);
}
.faq-list details[open] summary .pm::before,
.faq-list details[open] summary .pm::after {
  background: #fff;
}
.faq-list details[open] summary .pm::after {
  transform: rotate(0deg);
}
.faq-list summary:hover .pm {
  box-shadow: inset 0 0 0 1px var(--line-3);
}
.faq-a {
  padding: 0 56px 26px 0;
  color: var(--slate);
  font-size: 16.5px;
  line-height: 1.65;
}
.faq-a a {
  color: var(--blue-deep);
  font-weight: 550;
  text-decoration: underline;
  text-decoration-color: rgba(33, 88, 180, 0.3);
  text-underline-offset: 3px;
}
.faq-a a:hover {
  text-decoration-color: currentColor;
}

.contact-band {
  padding-block: clamp(72px, 8vw, 120px);
  border-top: 1px solid var(--line);
}
.contact-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.contact-inner .h2 {
  font-size: clamp(28px, 1.6vw + 18px, 44px);
  max-width: 20ch;
}
.contact-inner p {
  margin-top: 12px;
  color: var(--slate);
  font-size: 17px;
}

/* ---------- request a demo ---------- */
.demo-hero {
  padding-bottom: var(--section-y);
}
.demo-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.demo-copy {
  padding-top: clamp(8px, 2vw, 32px);
}
.demo-copy .h1 {
  max-width: 10ch;
}
.demo-copy .lead {
  margin-top: 24px;
  max-width: 30em;
}
.demo-copy .ticks {
  margin-top: 32px;
}
.demo-alt {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  color: var(--slate);
  font-size: 16px;
}
.demo-card {
  padding: clamp(24px, 3vw, 40px);
}
.demo-card-title {
  margin-bottom: 22px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
/* until the form renders: a skeleton of its fields; Marketo's raw form stays out of sight */
.demo-skeleton {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
}
.demo-skeleton span {
  height: 70px;
  border-radius: 10px;
  background: linear-gradient(90deg, var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
.demo-skeleton .wide {
  grid-column: 1 / -1;
  height: 84px;
}
.demo-skeleton .btn {
  grid-column: 1 / -1;
  height: 54px;
  border-radius: 999px;
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .demo-skeleton span {
    animation: none;
  }
}
.demo-form.is-ready .demo-skeleton,
.demo-form.is-failed .demo-skeleton {
  display: none;
}
.demo-form:not(.is-ready) > form {
  visibility: hidden;
  height: 0;
  overflow: hidden;
}
.demo-note p + p {
  margin-top: 8px;
}
.demo-note p:not(.h4) {
  color: var(--slate);
  font-size: 16px;
}
.demo-note a,
.demo-noscript a {
  color: var(--blue-deep);
  font-weight: 550;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(33, 88, 180, 0.3);
}
.demo-success {
  padding: 12px 0 8px;
}
.demo-success:focus {
  outline: none;
}
.demo-success-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green-tint);
  color: var(--green-deep);
}
.demo-success-icon svg {
  width: 22px;
  height: 22px;
}

/* the Marketo form, restyled (site.js removes Marketo's own CSS and inline styles first) */
.cc-mkto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 14px;
  width: auto;
  margin: 0;
  padding: 0;
  font: inherit;
  color: var(--body);
}
.cc-mkto *,
.cc-mkto *::before,
.cc-mkto *::after {
  box-sizing: border-box;
}
.cc-mkto .mktoFormRow,
.cc-mkto .mktoButtonRow {
  min-width: 0;
}
.cc-mkto .mktoFormRow.cc-hidden {
  display: none;
}
.cc-mkto .cc-full,
.cc-mkto .mktoButtonRow {
  grid-column: 1 / -1;
}
.cc-mkto .mktoOffset,
.cc-mkto .mktoGutter,
.cc-mkto .mktoClear,
.cc-mkto .mktoInstruction:empty {
  display: none;
}
.cc-mkto .mktoFieldDescriptor,
.cc-mkto .mktoFieldWrap {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
}
.cc-mkto .mktoLabel {
  display: block;
  width: auto;
  margin: 0 0 7px;
  padding: 0;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.cc-mkto .mktoRequiredField > .mktoLabel::after {
  content: '*';
  content: '*' / '';
  margin-left: 3px;
  color: var(--red-deep);
}
.cc-mkto input.mktoField:not([type='checkbox']):not([type='radio']),
.cc-mkto select.mktoField,
.cc-mkto textarea.mktoField {
  display: block;
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15.5px;
  line-height: 1.3;
  box-shadow: 0 1px 2px rgba(11, 20, 51, 0.04);
  transition:
    border-color 0.15s var(--ease),
    box-shadow 0.2s var(--ease);
}
.cc-mkto textarea.mktoField {
  height: auto;
  min-height: 110px;
  padding: 12px 14px;
}
.cc-mkto select.mktoField {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 40px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356627f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 16px 16px;
  cursor: pointer;
}
.cc-mkto .mktoField:hover {
  border-color: var(--line-3);
}
.cc-mkto .mktoField:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(47, 111, 208, 0.14);
}
/* as specific as the base field rules, so every invalid field is outlined, focused or not */
.cc-mkto input.mktoField.mktoInvalid:not([type='checkbox']):not([type='radio']),
.cc-mkto select.mktoField.mktoInvalid,
.cc-mkto textarea.mktoField.mktoInvalid {
  border-color: var(--red);
  box-shadow: 0 0 0 4px rgba(214, 41, 63, 0.1);
}
/* checkbox groups as chips */
.cc-mkto .mktoCheckboxList,
.cc-mkto .mktoRadioList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: auto;
  margin: 2px 0 0;
  padding: 0;
  float: none;
}
.cc-mkto .cc-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.3;
  transition:
    background-color 0.15s var(--ease),
    box-shadow 0.15s var(--ease);
}
.cc-mkto .cc-check:hover {
  box-shadow: inset 0 0 0 1px var(--line-3);
}
.cc-mkto .cc-check:has(input:checked) {
  background: var(--blue-tint);
  box-shadow: inset 0 0 0 1.5px var(--blue);
  color: var(--ink);
}
.cc-mkto .cc-check:has(input:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
.cc-mkto .cc-check input {
  -webkit-appearance: none;
  appearance: none;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid var(--line-3);
  border-radius: 5px;
  background: #fff;
  cursor: pointer;
}
.cc-mkto .cc-check input:checked {
  border-color: var(--blue);
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.2 4L19 7'/%3E%3C/svg%3E") no-repeat center / 12px 12px;
}
.cc-mkto .cc-check input:focus {
  outline: none;
}
.cc-mkto .cc-check label {
  margin: 0;
  padding: 0;
  cursor: pointer;
}
/* the whole chip toggles the option */
.cc-mkto .cc-check label::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
/* consent text */
.cc-mkto .mktoHtmlText {
  width: auto;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.55;
}
.cc-mkto .mktoHtmlText * {
  color: inherit;
  font-size: inherit;
}
.cc-mkto .mktoHtmlText a {
  color: var(--slate);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* errors: below the field instead of Marketo's floating tooltip */
.cc-mkto .mktoError {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  margin-top: 6px;
  padding: 0;
  z-index: auto;
}
.cc-mkto .mktoErrorArrowWrap {
  display: none !important;
}
.cc-mkto .mktoErrorMsg {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--red-deep);
  font-size: 13px;
  font-weight: 550;
  line-height: 1.4;
  text-shadow: none;
}
.cc-mkto .mktoErrorMsg .mktoErrorDetail {
  display: inline;
}
/* submit */
.cc-mkto .mktoButtonRow {
  margin-top: 4px;
}
.cc-mkto .mktoButtonWrap {
  display: block;
  margin: 0;
}
.cc-mkto .mktoButton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 54px;
  margin: 0;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 2px rgba(11, 20, 51, 0.24),
    0 8px 20px -8px rgba(11, 20, 51, 0.45);
  transition:
    background-color 0.2s var(--ease),
    box-shadow 0.25s var(--ease),
    transform 0.25s var(--ease);
}
.cc-mkto .mktoButton:hover {
  background: #17224a;
}
.cc-mkto .mktoButton:active {
  transform: translateY(1px) scale(0.995);
}
.cc-mkto .mktoButton:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.cc-mkto .mktoButton[disabled] {
  opacity: 0.7;
  cursor: progress;
}
@media (max-width: 960px) {
  .demo-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .demo-copy .h1 {
    max-width: none;
  }
}
@media (max-width: 520px) {
  .cc-mkto,
  .demo-skeleton {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- legal pages (security, terms): ported copy in a readable column, with a table of contents ---------- */
.legal-hero {
  padding-bottom: clamp(44px, 5vw, 72px);
}
.legal-hero .h1 {
  max-width: 16ch;
}
.legal-hero .lead {
  margin-top: 22px;
  max-width: 36em;
}
.legal-date {
  margin-top: 18px;
  color: var(--muted);
  font-size: 15.5px;
  font-weight: 550;
}
.legal-notice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 780px;
  margin-top: 32px;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--blue-tint);
  box-shadow: inset 0 0 0 1px rgba(47, 111, 208, 0.18);
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.55;
}
.legal-notice svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--blue-deep);
}
.legal-notice a {
  color: var(--blue-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(33, 88, 180, 0.35);
}
.legal-notice a:hover {
  text-decoration-color: currentColor;
}
.legal-layout {
  display: grid;
  grid-template-columns: 236px minmax(0, 720px);
  gap: clamp(40px, 6vw, 104px);
  align-items: start;
  padding-bottom: var(--section-y);
}
.legal-toc,
.post-toc {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  max-height: calc(100vh - var(--header-h) - 64px);
  overflow-y: auto;
  padding: 2px 8px 2px 0;
  scrollbar-width: thin;
}
.legal-toc-title,
.post-toc-title {
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.legal-toc > ol,
.post-toc > ol {
  margin-top: 14px;
  border-left: 1px solid var(--line);
}
.legal-toc a,
.post-toc a {
  display: block;
  margin-left: -1px;
  padding: 5px 0 5px 14px;
  border-left: 2px solid transparent;
  color: var(--slate);
  font-size: 14px;
  line-height: 1.4;
  transition:
    color 0.15s var(--ease),
    border-color 0.15s var(--ease);
}
.legal-toc ol ol a {
  padding-left: 26px;
  font-size: 13.5px;
}
.legal-toc a:hover,
.post-toc a:hover {
  color: var(--ink);
}
.legal-toc a[aria-current],
.post-toc a[aria-current] {
  border-left-color: var(--blue);
  color: var(--ink);
  font-weight: 600;
}
.prose {
  color: var(--body);
  font-size: 17px;
  line-height: 1.7;
}
.prose > * + * {
  margin-top: 18px;
}
.prose h2 {
  margin-top: 60px;
  color: var(--ink);
  font-size: clamp(24px, 0.9vw + 18px, 30px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.prose h3 {
  margin-top: 38px;
  color: var(--ink);
  font-size: 19.5px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.015em;
}
.prose > :first-child {
  margin-top: 0;
}
.prose h2 + *,
.prose h3 + * {
  margin-top: 12px;
}
.prose ul,
.prose ol {
  padding-left: 1.25em;
  list-style: disc;
}
.prose ol {
  list-style: decimal;
}
.prose li {
  padding-left: 6px;
}
.prose li + li {
  margin-top: 10px;
}
.prose li::marker {
  color: var(--faint);
}
.prose a {
  color: var(--blue-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(33, 88, 180, 0.3);
  overflow-wrap: anywhere;
}
.prose a:hover {
  text-decoration-color: currentColor;
}
.prose strong {
  color: var(--ink);
  font-weight: 650;
}
.prose .soc2 {
  float: right;
  width: 112px;
  height: auto;
  margin: 2px 0 18px 32px;
}
@media (max-width: 1100px) {
  .legal-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .legal-toc {
    display: none;
  }
  .prose {
    max-width: 720px;
  }
}
@media (max-width: 640px) {
  .prose {
    font-size: 16px;
  }
  .prose .soc2 {
    width: 88px;
    margin-left: 20px;
  }
  .legal-notice {
    padding: 14px 16px;
    font-size: 15px;
  }
}

/* ---------- 404 ---------- */
.lost {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: max(760px, 100vh);
  padding: calc(var(--header-h) + clamp(64px, 9vw, 140px)) 0 80px;
}
.lost-art {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.lost-art picture,
.lost-art img {
  width: 100%;
  height: 100%;
}
/* A pale shaded-relief map. The terrain fills the right half and fades out to the left behind the text; the dashed
   trail that loops back on itself sits right of centre. */
.lost-art img {
  object-fit: cover;
  object-position: 50% 70%;
  opacity: 0.8;
}
/* Phones: the text takes the full width, so the map sits below the buttons, with the trail's loop in view. */
@media (max-width: 640px) {
  .lost-art {
    top: auto;
    height: 52%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%);
    mask-image: linear-gradient(180deg, transparent 0, #000 30%);
  }
  .lost-art img {
    object-position: 72% 50%;
  }
}
.lost .h1 {
  max-width: 12ch;
}
.lost .lead {
  margin-top: 22px;
  max-width: 26em;
}
.lost .cta-row {
  margin-top: 34px;
}

/* ---------- blog (blog.cloudcraft.co): listings, cards, and posts ----------
   The blog is its own site but the same design: this stylesheet is copied to it. Posts set the long-form type in
   .prose (shared with the legal pages) a size up, in a 720 px measure, with the table of contents in the left margin. */
:root {
  --measure: 720px;
}
.blog-hero {
  position: relative;
  isolation: isolate;
  padding: calc(var(--header-h) + clamp(48px, 6.4vw, 104px)) 0 clamp(36px, 4vw, 56px);
}
.blog-hero .eyebrow {
  margin-bottom: 26px;
}
.blog-hero .eyebrow a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.2s var(--ease);
}
.blog-hero .eyebrow a:hover {
  text-decoration-color: currentColor;
}
.blog-hero .h1 {
  max-width: 15ch;
}
.blog-hero .lead {
  margin-top: 24px;
  max-width: 36em;
}
.blog-hero .lead a {
  color: var(--blue-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(33, 88, 180, 0.3);
}
.blog-hero .lead a:hover {
  text-decoration-color: currentColor;
}
.author-hero {
  margin-bottom: 28px;
}
.blog-list {
  padding-bottom: clamp(80px, 9vw, 136px);
}

/* topics: the categories, as chips */
.topics {
  margin-bottom: clamp(36px, 4.4vw, 60px);
}
.topics ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.topics a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink-2);
  font-size: 14.5px;
  font-weight: 550;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    0 1px 2px rgba(11, 20, 51, 0.04);
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease),
    box-shadow 0.25s var(--ease);
}
.topics a:hover {
  box-shadow:
    inset 0 0 0 1px var(--line-3),
    0 6px 16px -8px rgba(11, 20, 51, 0.2);
}
.topics a[aria-current] {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 6px 16px -8px rgba(11, 20, 51, 0.45);
}

/* bylines (the avatar, then the name over the date) and avatars */
.byline {
  display: flex;
  align-items: center;
  gap: 14px;
}
.byline-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.byline-name {
  align-self: flex-start;
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  border-radius: 4px;
}
a.byline-name:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-3);
}
.byline-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 9px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
}
/* the dot between a date and a reading time */
.meta-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}
.avatar {
  --s: 32px;
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-3);
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* a hairline inside the circle, so a photo's light edge doesn't bleed into the page */
picture.avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(11, 20, 51, 0.08);
}
.avatar--mono {
  background: linear-gradient(140deg, #e3ebfa, #f0f3f8);
  box-shadow: inset 0 0 0 1px rgba(33, 88, 180, 0.14);
  color: var(--blue-deep);
  font-size: calc(var(--s) * 0.37);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}
.avatar--brand {
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.avatar--brand img {
  width: 58%;
  height: 58%;
  object-fit: contain;
}

/* the latest post, featured at the top of the blog */
.post-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  gap: clamp(28px, 4.4vw, 72px);
  align-items: center;
  margin-bottom: clamp(56px, 6.4vw, 96px);
  padding-bottom: clamp(56px, 6.4vw, 96px);
  border-bottom: 1px solid var(--line);
  border-radius: 2px;
}
.post-feature-media,
.post-card-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-2);
}
.post-feature-media {
  border-radius: var(--r-l);
  box-shadow: var(--sh-2);
}
.post-feature-media::after,
.post-card-media::after,
.post-cover-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(11, 20, 51, 0.07);
  pointer-events: none;
}
.post-feature-media picture,
.post-feature-media img,
.post-card-media picture,
.post-card-media img {
  width: 100%;
  height: 100%;
}
.post-feature-media img,
.post-card-media img {
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.post-feature:hover .post-feature-media img,
.post-card:hover .post-card-media img {
  transform: scale(1.035);
}
.post-feature-title {
  margin-top: 20px;
  color: var(--ink);
  font-size: clamp(28px, 1.5vw + 17px, 42px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.post-feature-desc {
  margin-top: 18px;
  color: var(--slate);
  font-size: 17.5px;
  line-height: 1.6;
}
.post-feature .byline {
  margin-top: 26px;
}
/* each card is one link: its title's, stretched over the card, which shows the focus ring */
.post-feature-title a::after,
.post-card-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
.post-feature-title a:focus-visible,
.post-card-title a:focus-visible {
  outline: none;
}
.post-feature:has(a:focus-visible),
.post-card:has(a:focus-visible) {
  outline: 2px solid var(--blue);
  outline-offset: 8px;
  border-radius: 20px;
}

/* post cards */
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(40px, 4vw, 60px) clamp(20px, 2.4vw, 36px);
}
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
}
.post-card-media {
  border-radius: 18px;
}
.post-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-top: 22px;
}
.post-card-topic,
.post-feature .eyebrow {
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.14em;
}
.post-card-topic::before,
.post-feature .eyebrow::before {
  width: 16px;
}
.post-card-title {
  margin-top: 14px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.post-card:hover .post-card-title a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--line-3);
}
.post-card-desc {
  display: -webkit-box;
  margin-top: 10px;
  overflow: hidden;
  color: var(--slate);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.post-card-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 18px;
  color: var(--muted);
  font-size: 13.5px;
  font-weight: 500;
}
.post-card-meta .avatar {
  margin-right: 2px;
}
/* the author, then the date (or the date, then the reading time), with a dot between. If they don't fit side by side,
   the second goes on a line of its own, and the dot, which hangs to its left, is clipped. */
.post-card-who {
  display: flex;
  flex-wrap: wrap;
  column-gap: 19px;
  row-gap: 3px;
  min-width: 0;
  overflow: hidden;
}
.post-card-who > * {
  position: relative;
}
.post-card-who > * + *::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -11px;
  width: 3px;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
.post-card-author {
  color: var(--ink-2);
  font-weight: 600;
}

/* The Monitor, Datadog's blog: its posts about Cloudcraft are listed with the blog's own, with this badge where a
   card's topic goes, and link out to it. The badge takes up no more height than a topic, so titles stay level. */
.badge-monitor {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  height: 22px;
  margin-block: -5px;
  padding: 0 10px 0 8px;
  border-radius: 999px;
  background: #f5f0fc;
  box-shadow: inset 0 0 0 1px rgba(99, 44, 166, 0.16);
  color: var(--dd-purple);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-monitor::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--dd-purple), #d6249f);
}
.post-card-topic--monitor {
  display: flex;
  align-items: center;
  height: 12px;
}
.eyebrow--monitor {
  --c: var(--dd-purple);
  --t: var(--dd-purple);
}
/* the up-right arrow that ends the title of a post on The Monitor */
.title-end {
  white-space: nowrap;
}
.post-card-title .ext,
.post-feature-title .ext {
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.25em;
  vertical-align: 0.02em;
  opacity: 0.4;
  transition:
    transform 0.25s var(--ease),
    opacity 0.25s var(--ease);
}
.post-card:hover .post-card-title .ext,
.post-feature:hover .post-feature-title .ext {
  opacity: 0.8;
  transform: translate(2px, -2px);
}
/* co-authors' avatars overlap, each ringed in the page colour */
.avatar-stack {
  display: inline-flex;
  flex: none;
}
.avatar-stack .avatar {
  outline: 2px solid var(--bg);
}
.avatar-stack .avatar + .avatar {
  margin-left: calc(var(--s) * -0.18);
}
.post-card-meta .avatar-stack {
  margin-right: 2px;
}
.post-card-meta .avatar-stack .avatar {
  margin-right: 0;
}

/* ---------- a post ---------- */
.post-column {
  width: 100%;
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.post-head {
  position: relative;
  isolation: isolate;
  padding: calc(var(--header-h) + clamp(44px, 5.6vw, 92px)) 0 clamp(36px, 3.8vw, 56px);
}
.post-topic a {
  border-radius: 4px;
}
.post-topic a:hover {
  color: var(--ink);
}
.post-title {
  margin-top: 24px;
  color: var(--ink);
  font-size: clamp(34px, 2.2vw + 19px, 54px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.036em;
  text-wrap: balance;
}
.post-head .byline {
  margin-top: 30px;
}
.post-cover {
  margin-bottom: clamp(40px, 4.6vw, 72px);
}
.post-cover-frame {
  position: relative;
  overflow: hidden;
  border-radius: clamp(14px, 1.6vw, 24px);
  background: var(--bg-2);
  box-shadow: var(--sh-2);
}
.post-cover-frame picture,
.post-cover-frame img {
  width: 100%;
  height: 100%;
}
.post-cover-frame img {
  object-fit: cover;
  object-position: var(--pos, 50% 50%);
}
.post-layout {
  width: 100%;
  max-width: calc(var(--measure) + var(--gutter) * 2);
  margin-inline: auto;
  padding: 0 var(--gutter) clamp(56px, 6vw, 88px);
}
.post-toc {
  display: none;
}
/* the table of contents sits in the left margin, where there's room for it */
@media (min-width: 1240px) {
  .post-layout.has-toc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)) minmax(0, 1fr);
    column-gap: clamp(40px, 4vw, 72px);
    max-width: none;
  }
  .post-layout.has-toc .post-toc {
    display: block;
    grid-column: 1;
    justify-self: end;
    align-self: start;
    width: 100%;
    max-width: 232px;
  }
  .post-layout.has-toc .post-body {
    grid-column: 2;
  }
}

/* the long-form type, a size up from the legal pages */
.post-body {
  font-size: 18px;
  line-height: 1.72;
}
.post-body > p:first-child {
  color: var(--ink-2);
  font-size: clamp(19px, 0.4vw + 17px, 21px);
  line-height: 1.6;
  letter-spacing: -0.01em;
}
.post-body h2 {
  margin-top: 64px;
}
.post-body h3 {
  margin-top: 40px;
  font-size: 21px;
}
.post-body h4 {
  margin-top: 32px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 650;
}
.post-body h2 + *,
.post-body h3 + * {
  margin-top: 14px;
}
.prose li > ul,
.prose li > ol {
  margin-top: 10px;
}
.prose em {
  font-style: italic;
}
.prose sup {
  font-size: 0.7em;
  line-height: 0;
}
.prose hr {
  height: 1px;
  margin-block: 48px;
  border: 0;
  background: var(--line);
}
.prose .figure {
  margin-block: 40px;
}
.prose .figure picture {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #fff;
}
/* figures sit on a hairline frame, so a diagram on white reads as one picture */
.prose .figure:not(.figure--small) picture::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--line);
  pointer-events: none;
}
.prose .figure img {
  width: 100%;
}
.prose .figure--small {
  text-align: center;
}
.prose .figure--small picture {
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}
.prose .figure--small img {
  width: auto;
}
.prose figcaption {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
  text-align: center;
  text-wrap: balance;
}
.prose .float-right {
  float: right;
  width: min(40%, var(--w, 240px));
  margin: 6px 0 20px 32px;
}
.prose .float-right picture::after {
  display: none;
}
.prose .figure--video video {
  width: 100%;
  height: auto;
  border-radius: 14px;
  background: var(--bg-2);
  box-shadow: 0 0 0 1px var(--line);
}
.prose .table-wrap {
  margin-block: 36px;
  overflow-x: auto;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  scrollbar-width: thin;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.prose th,
.prose td {
  padding: 12px 18px;
  text-align: left;
  vertical-align: top;
}
.prose thead th {
  background: var(--bg-2);
  color: var(--ink);
  font-weight: 650;
  letter-spacing: -0.005em;
  border-bottom: 1px solid var(--line-2);
}
/* a comparison table's first column names each row */
.prose th[scope='row'] {
  color: var(--ink);
  font-weight: 600;
  border-top: 1px solid var(--line);
}
.prose td {
  border-top: 1px solid var(--line);
}
.prose tbody tr:first-child > * {
  border-top: 0;
}
.prose tbody tr:nth-child(even) > * {
  background: #fafbfd;
}
.prose td strong {
  color: var(--ink);
}
.prose code {
  font-variant-ligatures: none;
  font-feature-settings: 'calt' 0, 'liga' 0;
  padding: 0.14em 0.4em;
  border-radius: 6px;
  background: var(--bg-3);
  color: var(--ink-2);
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.84em;
  overflow-wrap: anywhere;
}
.prose pre {
  margin-block: 32px;
  padding: 20px 24px;
  overflow-x: auto;
  border-radius: 14px;
  background: var(--navy);
  color: #e3e7f1;
  font-size: 14px;
  line-height: 1.7;
  tab-size: 2;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.24) transparent;
}
.prose pre code {
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  overflow-wrap: normal;
}
.prose .callout {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-block: 32px;
  padding: 18px 22px;
  border-radius: 14px;
  background: var(--blue-tint);
  box-shadow: inset 0 0 0 1px rgba(47, 111, 208, 0.16);
  color: var(--ink-2);
  font-size: 16.5px;
  line-height: 1.6;
}
.prose .callout svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--blue-deep);
}
.prose .editor-note {
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--slate);
  font-size: 15.5px;
}
.prose .post-cta {
  margin-block: 32px;
}
.prose .btn {
  color: #fff;
  text-decoration: none;
}

/* figures that hold more detail than the column shows open larger */
.figure[data-zoom] picture {
  cursor: zoom-in;
}
.zoom-frame {
  position: relative;
}
.zoom-button {
  position: absolute;
  z-index: 1;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    0 4px 12px -4px rgba(11, 20, 51, 0.22);
  opacity: 0;
  transition: opacity 0.2s var(--ease);
}
.zoom-button svg {
  width: 15px;
  height: 15px;
}
.zoom-frame:hover .zoom-button,
.zoom-button:focus-visible {
  opacity: 1;
}
@media (hover: none) {
  .zoom-button {
    opacity: 1;
  }
}
.zoom {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: clamp(16px, 3vw, 40px);
  border: 0;
  background: transparent;
  overflow: auto;
  overscroll-behavior: contain;
}
.zoom::backdrop {
  background: rgba(11, 20, 51, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.zoom[open] {
  display: grid;
  place-items: center;
}
.zoom picture,
.zoom img {
  max-width: 100%;
  max-height: calc(100dvh - clamp(32px, 6vw, 80px));
  width: auto;
  height: auto;
  border-radius: 12px;
}
.zoom img {
  background: #fff;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
  cursor: zoom-out;
}
.zoom-close {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.zoom-close:hover {
  background: rgba(255, 255, 255, 0.22);
}
.zoom-close svg {
  width: 18px;
  height: 18px;
}
@media (prefers-reduced-motion: no-preference) {
  .zoom[open] img {
    animation: zoom-in 0.35s var(--ease-out);
  }
}
@keyframes zoom-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

/* after the post: who wrote it, where it's filed, and what to read next */
.post-foot {
  padding-bottom: clamp(64px, 7vw, 104px);
}
.post-author {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 30px 0;
  border-block: 1px solid var(--line);
}
.post-author-label {
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.post-author-name {
  margin-top: 6px;
  color: var(--ink);
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -0.015em;
}
.post-author-name a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--line-3);
}
.post-author-bio {
  margin-top: 8px;
  color: var(--slate);
  font-size: 15.5px;
  line-height: 1.6;
}
.post-author-bio a {
  color: var(--blue-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(33, 88, 180, 0.3);
}
.post-filed {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 550;
}
.post-filed span {
  margin-right: 6px;
}
a.chip {
  transition: box-shadow 0.25s var(--ease);
}
a.chip:hover {
  box-shadow:
    inset 0 0 0 1px var(--line-3),
    0 6px 16px -8px rgba(11, 20, 51, 0.2);
}
.related {
  padding-top: clamp(64px, 7vw, 104px);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-2), rgba(247, 248, 251, 0) 520px);
}
.related-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: clamp(32px, 3.4vw, 44px);
}
.final-cta--blog .h2 {
  max-width: 14ch;
}

@media (max-width: 1100px) {
  .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .post-grid--related .post-card:nth-child(3) {
    display: none;
  }
}
@media (max-width: 960px) {
  .post-feature {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 640px) {
  .post-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .post-grid--related .post-card:nth-child(3) {
    display: flex;
  }
  .topics {
    margin-inline: calc(var(--gutter) * -1);
  }
  .topics ul {
    flex-wrap: nowrap;
    gap: 6px;
    padding: 4px var(--gutter) 8px;
    overflow-x: auto;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
  }
  .topics ul::-webkit-scrollbar {
    display: none;
  }
  .topics li {
    flex: none;
  }
  .topics a {
    height: 36px;
    padding: 0 14px;
    font-size: 14px;
  }
  .post-body {
    font-size: 17px;
  }
  .post-body > p:first-child {
    font-size: 18.5px;
  }
  .prose .figure {
    margin-block: 32px;
  }
  .prose pre {
    margin-inline: calc(var(--gutter) * -1);
    padding: 18px var(--gutter);
    border-radius: 0;
    font-size: 13px;
  }
  .prose .float-right {
    margin-left: 20px;
  }
  .post-author {
    gap: 16px;
  }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .nav {
    position: static;
    transform: none;
  }
  .header-inner {
    gap: 20px;
  }
  .card--wide {
    grid-template-columns: 1fr;
  }
  .card--wide .bento-visual {
    min-height: 420px;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%);
    mask-image: linear-gradient(180deg, transparent 0, #000 12%);
  }
  .card--wide .bento-copy {
    padding-right: clamp(28px, 3vw, 44px);
  }
  .chapter-index {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dd-grid {
    grid-template-columns: 1fr;
  }
  .footer-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .footer-brand {
    grid-column: 1 / -1;
    margin-bottom: 8px;
  }
}

@media (max-width: 960px) {
  .nav,
  .header-actions .link-login,
  .header-actions .btn {
    display: none;
  }
  .menu-toggle {
    display: inline-flex;
  }
  .logo-wall {
    max-width: 640px;
  }
  .bento {
    grid-template-columns: 1fr;
  }
  .cap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cap:not(:nth-child(3n + 1)) {
    padding-left: 0;
    border-left: 0;
  }
  .cap:nth-child(2n) {
    padding-left: clamp(20px, 2.6vw, 36px);
    border-left: 1px solid var(--line);
  }
  .chapter-grid,
  .chapter--flip .chapter-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .chapter--flip .chapter-copy {
    order: 0;
  }
  .page-hero-head {
    grid-template-columns: minmax(0, 1fr);
  }
  .chapter-visual,
  .chapter--flip .chapter-visual {
    margin: 0 calc(var(--gutter) * -1);
  }
  .plan {
    grid-template-columns: 1fr;
  }
  .plan-main {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .overlay-cards {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }
  .faq {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }
  .hero h1 {
    margin-top: 24px;
  }
  .hero .cta-row,
  .final-cta .cta-row,
  .price-hero .cta-row,
  .integrations .cta-row {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
  }
  .hero-proof {
    gap: 6px 16px;
    font-size: 13.5px;
  }
  .film-toggle {
    width: 34px;
    height: 34px;
  }
  .logo-wall {
    gap: 24px 32px;
  }
  .logo-wall .logo-break {
    display: none;
  }
  .logo-wall li {
    height: 36px;
  }
  .logo-wall img {
    height: calc(var(--h, 28px) * 0.78);
  }
  .dark-art {
    height: 420px;
  }
  /* the image fades its own top into the navy, so a short gradient is enough here */
  .dark-art::before {
    background: linear-gradient(180deg, var(--navy) 0%, rgba(11, 20, 51, 0) 30%);
  }
  .dark-art img {
    object-position: 38% 100%;
  }
  .dark-spacer {
    height: 260px;
  }
  /* closing section: a taller crop of the clusters, below the stacked buttons rather than under them */
  .final-art {
    margin-top: 28px;
  }
  .final-art img {
    aspect-ratio: 4 / 3;
    object-position: 46% 70%;
  }
  /* pricing: the card fills the width, so show the field only under its foot */
  .price-field {
    top: auto;
    height: 230px;
  }
  .announce {
    font-size: 13.5px;
  }
  .announce .long {
    display: none;
  }
  .bento-visual {
    min-height: 240px;
  }
  .card--wide .bento-visual {
    min-height: 340px;
  }
  .activity {
    width: auto;
    right: 14px;
    left: 14px;
    bottom: 14px;
  }
  .cap-grid {
    grid-template-columns: 1fr;
  }
  .cap,
  .cap:nth-child(2n),
  .cap:not(:nth-child(3n + 1)) {
    padding-left: 0;
    padding-right: 0;
    border-left: 0;
  }
  .switcher-nav {
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .switcher-nav::-webkit-scrollbar {
    display: none;
  }
  .switcher-tabs {
    overflow: visible;
  }
  .tab {
    padding: 0 14px 0 12px;
    font-size: 14px;
  }
  .app-window {
    border-radius: 10px;
  }
  .chapter-index {
    grid-template-columns: 1fr;
  }
  .chapter-visual .ui-card {
    position: relative;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    margin: -24px var(--gutter) 0;
  }
  /* sol-security-m is the capture's (600, 195, 660x455) and the desktop crop's (500, 40, 980x675): same aspect, so
     one transform moves the attack path onto it. The Internet end is out of frame there, so its leg runs off the edge. */
  .attack-map {
    transform: scale(1.48485) translate(-100px, -155px);
  }
  .plate .internet {
    display: none;
  }
  .plan-list ul {
    grid-template-columns: 1fr;
  }
  .unlimited {
    flex-direction: column;
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 36px;
  }
  .contact-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}