/* ---------------------------------------------------------------
   shadcn theme

   The shadcn/ui visual language, applied on top of style.css to any page
   whose front matter sets `theme: shadcn` (layouts/base.njk adds the class
   and this file). Zinc neutrals, 1px borders, 10px radii, small shadows and
   one primary colour. Everything is scoped under .theme-shadcn so the pages
   still on the original look are untouched.

   The shared chrome (header, footer, buttons, cookie banner, reveals) is
   restyled here by overriding the classes in style.css. The home page
   sections use their own ui-* classes, defined further down.

   See docs/website/design-system.md, "shadcn theme".
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Tokens
   --------------------------------------------------------------- */
.theme-shadcn {
  /*
    #9251ef is the logo mark's own purple. It passes AA for text on white
    (4.5:1), and white text passes on it, so it serves as both the button
    fill and the link colour on light surfaces.
  */
  --primary: #9251ef;
  --primary-hover: #8443e6;
  --primary-foreground: #ffffff;

  --background: #ffffff;
  --foreground: #09090b;      /* zinc-950 */
  --card: #ffffff;
  --muted: #fafafa;           /* zinc-50: bands */
  --accent: #f4f4f5;          /* zinc-100: hover fills */
  --muted-foreground: #52525b;/* zinc-600: 7.7:1 on white, 7.4:1 on --muted. zinc-500 passed but read faint in Satoshi 400 */
  --secondary-foreground: #3f3f46; /* zinc-700: body copy that has to read at length */
  --border: #e4e4e7;          /* zinc-200 */
  --ring: var(--primary);

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);

  --ease: 0.15s cubic-bezier(0.4, 0, 0.2, 1);

  /* Keep the style.css tokens pointing at the new palette, so anything not
     restyled below still lands on it */
  --violet: var(--primary);
  --magenta-deep: var(--primary);
  --ink: var(--secondary-foreground);
  --ink-soft: var(--muted-foreground);
  --ink-nav: var(--foreground);
  --line: var(--border);
}

.theme-shadcn body {
  color: var(--foreground);
  background: var(--background);
}

.theme-shadcn :focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.theme-shadcn .accent { color: var(--primary); }

/*
  shadcn pages sit in a wider container with a modest gutter, rather than the
  original 100px either side
*/
.theme-shadcn .wrap { width: min(100% - 2rem, 1200px); }
@media (min-width: 640px) {
  .theme-shadcn .wrap { width: min(100% - 4rem, 1200px); }
}

/*
  Past 2000px the 1200px container shrinks to a strip down the middle, so the
  whole page is zoomed instead, keeping the layout between roughly 1800px and
  2200px wide: a big screen gets the page a 1920px screen gets, only larger.
  Each step also needs about 900px of height after zooming, so an ultrawide
  monitor isn't zoomed past what fits above the fold.

  Viewport units inside a zoomed page are zoomed too, so a rule sized in vw
  or vh divides by --zoom to get the real screen back.
*/
.theme-shadcn { --zoom: 1; zoom: var(--zoom); }
@media (min-width: 2000px) and (min-height: 990px)  { .theme-shadcn { --zoom: 1.1; } }
@media (min-width: 2200px) and (min-height: 1080px) { .theme-shadcn { --zoom: 1.2; } }
@media (min-width: 2500px) and (min-height: 1215px) { .theme-shadcn { --zoom: 1.35; } }
@media (min-width: 2900px) and (min-height: 1395px) { .theme-shadcn { --zoom: 1.55; } }
@media (min-width: 3400px) and (min-height: 1620px) { .theme-shadcn { --zoom: 1.8; } }

/* ---------------------------------------------------------------
   Buttons

   One fixed height per size and a 1px border instead of the pill and its
   inset ring. The gradient layer in style.css is switched off.
   --------------------------------------------------------------- */
.theme-shadcn .btn {
  gap: 0.5rem;
  height: 2.25rem;
  padding: 0 1rem 1px;  /* Satoshi sits low; the pixel lifts it to centre */
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
  transition: background-color var(--ease), color var(--ease), border-color var(--ease);
}
.theme-shadcn .btn::before { display: none; }
.theme-shadcn .btn--lg {
  height: 2.75rem;
  padding-inline: 1.5rem;
  font-size: 0.9375rem;
}

.theme-shadcn .btn--primary,
.theme-shadcn .btn--primary:hover {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: var(--shadow-xs);
}
.theme-shadcn .btn--primary:hover { background: var(--primary-hover); }

.theme-shadcn .btn--outline,
.theme-shadcn .btn--outline:hover {
  background: var(--background);
  border-color: var(--border);
  color: var(--foreground);
  box-shadow: var(--shadow-xs);
}
.theme-shadcn .btn--outline:hover { background: var(--accent); }

/* The button on a dark surface: white, which is what shadcn's dark mode
   uses as its primary */
.theme-shadcn .btn--light {
  background: #fafafa;
  color: var(--foreground);
}
.theme-shadcn .btn--light:hover { background: #e4e4e7; }

/* ---------------------------------------------------------------
   Header

   A fixed 64px bar with a hairline under it, translucent over the page. It
   no longer shrinks on scroll, so the margin trick in style.css is undone.
   --------------------------------------------------------------- */
.theme-shadcn .site-header {
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: saturate(1.8) blur(12px);
  backdrop-filter: saturate(1.8) blur(12px);
  border-bottom: 1px solid var(--border);
}
.theme-shadcn .site-header.is-scrolled {
  box-shadow: none;
  margin-bottom: 0;
}
.theme-shadcn .site-header__inner,
.theme-shadcn .is-scrolled .site-header__inner {
  min-height: 64px;
  gap: 1rem;
}
.theme-shadcn .site-header__logo .site-logo,
.theme-shadcn .is-scrolled .site-header__logo .site-logo { width: 132px; }
.theme-shadcn .site-header__menu { gap: 1rem; }

.theme-shadcn .site-header .btn--primary,
.theme-shadcn .is-scrolled .btn--primary {
  height: 2.25rem;
  padding: 0 1rem 1px;
  font-size: 0.875rem;
}

.theme-shadcn .nav__list { gap: 0.25rem; }
/* Ghost links: muted until hovered, when they darken over a zinc fill.
   The gradient text fill in style.css is dropped. */
.theme-shadcn .nav__link,
.theme-shadcn .nav__link.is-current {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  background: none;
  color: var(--muted-foreground);
  -webkit-text-fill-color: currentColor;
  transition: background-color var(--ease), color var(--ease);
}
.theme-shadcn .nav__link:hover {
  background: var(--accent);
  color: var(--foreground);
}
.theme-shadcn .nav__link.is-current { color: var(--foreground); }

@media (max-width: 1080px) {
  .theme-shadcn .site-header__inner { padding: 0; }
  .theme-shadcn .site-header .btn { font-size: 0.875rem; }
  .theme-shadcn.is-js .site-header__menu {
    padding: 0.5rem 1rem 1rem;
    background: var(--background);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }
  .theme-shadcn.is-js .nav__link {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    font-size: 1rem;
  }
  .theme-shadcn.is-js .nav__link:hover { background: none; }
}
@media (min-width: 640px) and (max-width: 1080px) {
  .theme-shadcn.is-js .site-header__menu { padding-inline: 2rem; }
}

/* ---------------------------------------------------------------
   Footer: the ink block

   The page ends on the art direction's dark block rather than a grey band,
   so the purple close above it, and every page that doesn't have one, stops
   on a definite edge. Its parts come from the page: columns between double
   rules (white at 35%, as on the ink band), focal dots on the headings, and
   a line field at the barrel angle with a lens on it, the field of view
   the page closes on. The field stops at the content edge, as the inner
   page intro tile does, and the lens takes the field's own colour so it
   stays a texture rather than a mark. It sits beside the copyright line,
   never under the links.

   The social icons are white line art drawn for the old black footer, so
   they need no filter here.
   --------------------------------------------------------------- */
.theme-shadcn .site-footer {
  --footer-rule: 4px double rgba(255, 255, 255, 0.35);
  /* Where the link columns begin; the field and lens start on that rule.
     The sum of the three column widths below */
  /* Where the link columns start: the sum of their widths below */
  --footer-split: calc(100% - 49.25rem);
  position: relative;
  overflow: clip;
  background: var(--rule);
  color: #a1a1aa;
  padding: 5.5rem 0 0;
}
.theme-shadcn .site-footer__inner {
  /* Each link column is its longest line plus 2.5rem either side, so the
     space from a rule to the text, and from the text to the next rule, is
     the same in every column */
  grid-template-columns: minmax(0, 1fr) 13rem 12.75rem 9.25rem 14.25rem;
  gap: 0;
}
.theme-shadcn .site-footer__brand { padding-right: 3rem; }
.theme-shadcn .site-footer__col {
  padding-left: 2.5rem;
  border-left: var(--footer-rule);
}
.theme-shadcn .site-footer__logo { color: #fff; }
.theme-shadcn .site-footer__logo .site-logo { width: 150px; }
.theme-shadcn .site-footer__blurb {
  max-width: 42ch;
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #d4d4d8;
}
.theme-shadcn .site-footer__socials { gap: 0.5rem; margin-top: 2rem; }
.theme-shadcn .site-footer__social {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  opacity: 1;
  transition: border-color var(--ease), background-color var(--ease);
}
.theme-shadcn .site-footer__social:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.06);
}
.theme-shadcn .site-footer__social img { width: 22px; height: auto; }
.theme-shadcn .site-footer :focus-visible { outline-color: #fff; }

/* The column headings are eyebrows */
.theme-shadcn .site-footer__heading {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
}
.theme-shadcn .site-footer__list { gap: 0.625rem; font-size: 0.9375rem; }
.theme-shadcn .site-footer__list a { transition: color var(--ease); }
.theme-shadcn .site-footer__list a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* The base: the copyright on the left, the field of view on the right */
.theme-shadcn .site-footer__base {
  position: relative;
  min-height: 9.5rem;
  margin-top: 5rem;
  padding: 1.5rem 0 2rem;
  border-top: var(--footer-rule);
  font-size: 0.8125rem;
  font-weight: 400;
  color: #a1a1aa;
}
.theme-shadcn .site-footer__field {
  --tx: rgba(255, 255, 255, 0.16);
  --gap: 12px;
  position: absolute;
  top: 1.75rem;
  bottom: 0;
  left: var(--footer-split);
  right: 0;
}
.theme-shadcn .site-footer__lens {
  --d: 60px;
  --tx: rgba(255, 255, 255, 0.16);
  top: calc(1.75rem + (100% - 1.75rem) / 2 - var(--d) / 2);
  left: calc(var(--footer-split) - var(--d) / 2);
  background: var(--rule);
}

/* Four link columns leave the blurb too little room below ~1180px, so the
   brand takes its own row and the columns share the width under it */
@media (max-width: 1180px) {
  .theme-shadcn .site-footer { --footer-split: 50%; }
  .theme-shadcn .site-footer__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .theme-shadcn .site-footer__brand {
    grid-column: 1 / -1;
    padding: 0 0 2.5rem;
    margin-bottom: 2.5rem;
    border-bottom: var(--footer-rule);
  }
  .theme-shadcn .site-footer__col:nth-child(2) { padding-left: 0; border-left: 0; }
  .theme-shadcn .site-footer__col { padding-left: 1.5rem; }
}
/* Two columns: Company drops under Website protection, so it starts a row
   with no rule on its left */
@media (max-width: 880px) {
  .theme-shadcn .site-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-shadcn .site-footer__col:nth-child(4) { padding-left: 0; border-left: 0; }
  .theme-shadcn .site-footer__col:nth-child(n + 4) { margin-top: 2.5rem; }
}
@media (max-width: 640px) {
  .theme-shadcn .site-footer { padding-top: 4rem; }
  .theme-shadcn .site-footer__base { min-height: 0; margin-top: 3.5rem; padding-bottom: 7.5rem; }
  /* One line of copyright, then the field under it, the lens on its left end */
  .theme-shadcn .site-footer__field { top: auto; height: 5rem; }
  .theme-shadcn .site-footer__lens {
    --d: 48px;
    top: auto;
    bottom: calc(2.5rem - var(--d) / 2);
  }
}

/* ---------------------------------------------------------------
   Cookie banner
   --------------------------------------------------------------- */
.theme-shadcn .cookie-banner__inner {
  border-color: var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.theme-shadcn .cookie-banner__text { color: var(--muted-foreground); }
.theme-shadcn .cookie-banner__text a { color: var(--foreground); }
.theme-shadcn .cookie-banner__btn,
.theme-shadcn .cookie-banner__btn:hover {
  background: var(--foreground);
  color: var(--background);
  padding-inline: 1.25rem;
}
.theme-shadcn .cookie-banner__btn:hover { background: #27272a; }

/* ===============================================================
   Lines of sight

   The art direction layer (docs/website/art-direction.md). Everything below draws
   on three parts of the logo: the barrels (roll and line fields), the
   lenses (rings) and the dot between them. Classes are prefixed ad-.
   =============================================================== */

/* Clash Display, the brand package's display face. Same licence and the
   same hashed-filename rule as the fonts in style.css. */
@font-face {
  font-family: "Clash Display";
  src: url("/fonts/clash-600.3ac74888.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.theme-shadcn {
  --font-display: "Clash Display", Switzer, sans-serif;
  /* Rules, bordered boxes and the ink block: zinc-950, the page's black */
  --rule: #09090b;
  --lilac: #ede4fd;
  --lilac-line: #cdb5fa;
  /* The barrel angle: the logo's barrels lean 20 degrees off vertical */
  --barrel: 20deg;
  /* The double rule: two 1px lines 2px apart */
  --double: 4px double var(--rule);
}

/* ---------------------------------------------------------------
   Header: nothing under it at the top of the page; a faint line fades in
   once js/header.js sets is-scrolled. Ink at 6%, about half the weight of
   --border, which read as too hard an edge. A shadow doesn't suit the flat
   look. The border is always there, transparent, so the bar doesn't change
   height when it appears.
   --------------------------------------------------------------- */
.theme-shadcn .site-header {
  background: var(--background);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.theme-shadcn .site-header.is-scrolled { border-bottom-color: rgba(9, 9, 11, 0.06); }
.theme-shadcn .site-header__inner,
.theme-shadcn .is-scrolled .site-header__inner { min-height: 72px; }

/* ---------------------------------------------------------------
   The texture kit
   --------------------------------------------------------------- */
/*
  Line field: thin parallel lines in --tx, upright, level or at the barrel
  angle. 110deg puts the lines 20 degrees off vertical, leaning the way the
  logo's left barrel does.
*/
.ad-lines {
  --tx: var(--primary);
  --gap: 12px;
  background-image: repeating-linear-gradient(var(--dir, 90deg), var(--tx) 0 var(--weight, 1.5px), transparent var(--weight, 1.5px) var(--gap));
}
.ad-lines--v { --dir: 90deg; }
.ad-lines--h { --dir: 180deg; }
.ad-lines--tilt { --dir: calc(90deg + var(--barrel)); }

/* Lens: a thick ring, its stroke an eighth of its diameter. White inside, so
   over a field it reads as a clear patch in the view. */
.ad-lens {
  --d: 96px;
  --tx: var(--primary);
  position: absolute;
  width: var(--d);
  height: var(--d);
  border: calc(var(--d) / 8) solid var(--tx);
  border-radius: 50%;
  background: var(--background);
}

/* A single barrel, set at the barrel angle. The rolls are used one at a
   time, as marks, never massed into a fill. */
.ad-capsule {
  display: block;
  width: 14px;
  height: 44px;
  border-radius: 7px;
  background: var(--primary);
  transform: rotate(var(--barrel));
}

/* Focal dots: a purple dot before each item, in place of icons */
.ad-dots {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ad-dots li {
  position: relative;
  padding: 0.625rem 0 0.625rem 1.25rem;
  border-bottom: 1px solid var(--border);
  color: var(--secondary-foreground);
}
.ad-dots li:last-child { border-bottom: 0; }
.ad-dots li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.1rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}
.ad-dots--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
  margin-top: 1.75rem;
}
.ad-dots--inline li {
  padding-block: 0;
  border: 0;
  font-weight: 500;
  color: var(--foreground);
}
.ad-dots--inline li::before { top: 0.5rem; }

/* Fields draw in from the left as they arrive */
.theme-shadcn.is-js [data-reveal="lines"] {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s cubic-bezier(0.65, 0, 0.35, 1);
}
.theme-shadcn.is-js [data-reveal="lines"].is-revealed { clip-path: inset(0 0 0 0); }

.theme-shadcn.is-js [data-reveal] { transition-delay: var(--reveal-delay, 0ms); }
.theme-shadcn.is-js [data-reveal^="from-"] {
  transform: translateY(24px);
  transition-duration: 0.8s;
}
.theme-shadcn.is-js [data-reveal^="from-"].is-revealed { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .theme-shadcn.is-js [data-reveal] { opacity: 1; transform: none; clip-path: none; }
}

/* ---------------------------------------------------------------
   Type
   --------------------------------------------------------------- */
.ad-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 1.5rem 4rem;
  margin-bottom: 3.5rem;
}
.ad-head__body {
  justify-self: end;
  max-width: 32rem;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}
/* The eyebrow, after a focal dot, in sentence case as written */
.ad-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--foreground);
}
.ad-eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}
.ad-heading {
  max-width: 17ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 4.4vw, 3.5rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--foreground);
  text-wrap: balance;
}
.ad-head--light .ad-eyebrow,
.ad-head--light .ad-heading { color: #fff; }
.ad-head--light .ad-eyebrow::before { background: #fff; }

.ad-title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--foreground);
}
.ad-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

.ad-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2.25rem;
}

.ad-section { padding: 7rem 0; }
.ad-section--tight { padding-top: 2rem; }
/* A page that opens on a section instead of an intro keeps the intro's top */
.ad-section--open { padding-top: 5rem; }
.ad-section--flush { padding-bottom: 0; }

/* ---------------------------------------------------------------
   Hero
   --------------------------------------------------------------- */
.ad-hero {
  padding: 6rem 0 7rem;
  overflow-x: clip;
}
/* The copy takes the larger share, so the heading sets in three lines; the
   collage is an accent beside it, not a second hero */
.ad-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: center;
  gap: 4rem;
}
.ad-hero__heading {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(2.5rem, 4.4vw, 4rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--foreground);
}
.ad-hero__body {
  max-width: 34rem;
  margin: 1.75rem 0 0;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}

/*
  The video's backdrop is one rectangle in the use-case tiles' language: a
  purple block on the left, a field of thin lines at the barrel angle on the
  right. The video sits centred across the seam, so all three share edges
  and nothing floats.
*/
.ad-hero__collage {
  position: relative;
  aspect-ratio: 5 / 4;
}
.ad-hero__block {
  position: absolute;
  inset: 0 55% 0 0;
  background: var(--primary);
}
.ad-hero__lines {
  --gap: 12px;
  position: absolute;
  inset: 0 0 0 45%;
}
.ad-hero__video {
  position: absolute;
  left: 8%;
  top: 50%;
  z-index: 1;
  display: block;
  width: 84%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  transform: translateY(-50%);
  background: var(--accent);
  border: 1px solid var(--rule);
  box-shadow: 0 20px 40px -24px rgba(9, 9, 11, 0.45);
}
.ad-hero__video img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.ad-hero__video:hover img { transform: scale(1.03); }
.ad-hero__video:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 3px;
}
/* The play button is the dot between the logo's two lenses, scaled up */
.ad-hero__play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  padding-left: 3px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 0 0 8px rgba(146, 81, 239, 0.22), 0 10px 24px -8px rgba(9, 9, 11, 0.5);
  transform: translate(-50%, -50%);
  transition: transform var(--ease), background var(--ease);
}
.ad-hero__video:hover .ad-hero__play {
  background: var(--primary-hover);
  transform: translate(-50%, -50%) scale(1.08);
}
.ad-hero__duration {
  position: absolute;
  right: 0.625rem;
  bottom: 0.625rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--radius-sm);
  background: rgba(9, 9, 11, 0.78);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/*
  The player itself. The dialog is exactly the video's box, so any click that
  lands on the dialog element rather than the video is on the backdrop.
*/
.ad-video-dialog {
  width: min(92vw / var(--zoom), 1200px, (100vh / var(--zoom) - 8rem) * 16 / 9);
  max-width: none;
  padding: 0;
  overflow: visible;
  border: 0;
  background: #000;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}
.ad-video-dialog::backdrop { background: rgba(9, 9, 11, 0.85); }
.ad-video-dialog video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}
.ad-video-dialog__close {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.75rem);
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}
.ad-video-dialog__close:hover { background: rgba(255, 255, 255, 0.28); }

/* ---------------------------------------------------------------
   Client logos, between double rules

   The rules stop at the container, as they do around the steps, rather
   than running to the window's edges.
   --------------------------------------------------------------- */
.ad-logos__box {
  display: flex;
  align-items: center;
  gap: 3rem;
  padding: 1.75rem 0;
  border-block: var(--double);
}
.ad-logos__label {
  flex: none;
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--foreground);
}
/* style.css centres the strip with auto margins, which would stop it
   stretching to the row here */
.ad-logos .clients__viewport {
  flex: 1;
  min-width: 0;
  width: 100%;
  margin: 0;
}
/* Six logos at this gap make a group wider than the strip, so no logo
   shows twice at once. Widen the gap before adding logos or shrinking it. */
.ad-logos .clients__group { gap: 7rem; padding-right: 7rem; }
.ad-logos .clients__group img {
  width: 92px;
  filter: grayscale(1);
  transition: filter var(--ease);
}
.ad-logos .clients__track:hover img { filter: none; }

/* ---------------------------------------------------------------
   Use cases: block + field tiles, each with its description under it

   The list runs down two columns, 01 to 03 on the left and 04 to 06 on
   the right, and the right column starts lower, so the set reads as an
   offset collage while the copy keeps its order.
   --------------------------------------------------------------- */
.ad-uc {
  column-count: 2;
  column-gap: 3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ad-uc__item {
  display: block;
  padding-bottom: 3.5rem;
  break-inside: avoid;
}
.ad-uc__item:nth-child(4) {
  break-before: column;
  padding-top: 9rem;
}
.ad-uc__body {
  max-width: 34rem;
  margin: 1.25rem 0 0.5rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--secondary-foreground);
}

.ad-tile {
  --tone: var(--primary);
  --tone-fg: #fff;
  --tone-line: var(--primary);
  position: relative;
  display: grid;
  grid-template-columns: 46% 54%;
  height: 17rem;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}
.ad-tile--ink { --tone: var(--rule); --tone-line: var(--rule); }
.ad-tile--lilac { --tone: var(--lilac); --tone-fg: var(--rule); --tone-line: var(--lilac-line); }

.ad-tile__block {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.75rem;
  background: var(--tone);
  color: var(--tone-fg);
}
.ad-tile__num {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.8;
}
.ad-tile__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1.05;
  color: inherit;
}
.ad-tile__field {
  --tx: var(--tone-line);
  position: relative;
  display: grid;
  place-items: center;
}
.ad-tile__lens {
  --tx: var(--tone-line);
  position: relative;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}

.ad-more {
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}
.ad-more:hover { text-decoration: underline; text-underline-offset: 4px; }
.ad-tile:is(:hover, :focus-visible) .ad-tile__lens { transform: scale(1.5); }
.ad-tile:focus-visible { outline-offset: 4px; }

/* ---------------------------------------------------------------
   How it works: a two-by-two between double rules, the numbers set
   upright and large, as a timeline sets its years
   --------------------------------------------------------------- */
.ad-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: var(--double);
}
.ad-steps__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 1.75rem;
  padding: 2.75rem 2.5rem;
}
.ad-steps__item:nth-child(odd) { border-right: var(--double); padding-left: 0; }
.ad-steps__item:nth-child(-n + 2) { border-bottom: var(--double); }
.ad-steps__num {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-size: 5rem;
  font-weight: 600;
  line-height: 0.85;
  color: var(--primary);
}
.ad-steps__item .ad-text { max-width: 30rem; }

/* ---------------------------------------------------------------
   Oversight: the purple band
   --------------------------------------------------------------- */
.ad-band {
  position: relative;
  overflow: hidden;
  padding: 7rem 0;
  background: var(--primary);
  color: #fff;
}
.ad-band > .wrap { position: relative; }
.ad-band__lines {
  --tx: rgba(255, 255, 255, 0.22);
  --gap: 14px;
  position: absolute;
  top: 0;
  right: 0;
  width: 46%;
  /* Down to the heading's foot and no further: the columns below carry body
     copy, and texture never runs behind words. A fixed height, because a
     share of the band grows with the copy (the four-column ink band on
     Partners ran 2rem into its third column). */
  height: 15.5rem;
}
.ad-band__lens {
  --d: 420px;
  --tx: rgba(255, 255, 255, 0.16);
  right: -110px;
  top: -150px;
  background: transparent;
}
.ad-oversight {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
.ad-oversight__item { padding: 0.5rem 2.5rem; }
.ad-oversight__item:first-child { padding-left: 0; }
.ad-oversight__item + .ad-oversight__item { border-left: 4px double rgba(255, 255, 255, 0.6); }
.ad-band .ad-title,
.ad-band .ad-text { color: #fff; }
.ad-band :focus-visible { outline-color: #fff; }

/* ---------------------------------------------------------------
   Key benefits: the heading holds while the rows pass
   --------------------------------------------------------------- */
.ad-benefits {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 4rem;
}
.ad-benefits__head .ad-head {
  position: sticky;
  top: 8rem;
  grid-template-columns: 1fr;
}
.ad-benefits__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.ad-benefits__row {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 0;
  border-bottom: 1px solid var(--rule);
}
.ad-benefits__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.05;
  color: var(--foreground);
}

/* ---------------------------------------------------------------
   Compliance roles: three columns between double rules, as the steps
   --------------------------------------------------------------- */
.ad-roles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: var(--double);
}
.ad-role { padding: 2.5rem; }
.ad-role:first-child { padding-left: 0; }
.ad-role + .ad-role { border-left: var(--double); }
.ad-role__title {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 600;
  line-height: 1;
  color: var(--primary);
}

/* ---------------------------------------------------------------
   Close: one purple block, the logo's mark set very large and faint
   across its right side, cropped by the bottom and right edges
   --------------------------------------------------------------- */
.ad-cta {
  position: relative;
  overflow: hidden;
  background: var(--primary);
  /* Keep the purple out of the double rule's gap, so it reads as the page's */
  background-clip: padding-box;
  color: #fff;
  border-top: var(--double);
}
.ad-cta__mark {
  position: absolute;
  right: -6%;
  bottom: -38%;
  width: min(62%, 820px);
  height: auto;
  fill: rgba(255, 255, 255, 0.1);
}
.ad-cta__block {
  position: relative;
  width: min(100% - 4rem, 1200px);
  margin-inline: auto;
  padding: 7rem 0;
}
.ad-cta__heading {
  max-width: 12ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 600;
  line-height: 1;
  color: #fff;
}
.ad-cta__body {
  max-width: 30rem;
  margin: 1.5rem 0 0;
  font-size: 1.125rem;
  line-height: 1.6;
}
.ad-cta :focus-visible { outline-color: #fff; }

/* Contained: a block inside the page, on the article hero's 1000px track,
   for a close that something follows */
.ad-cta--contained {
  width: min(1000px, calc(100% - 4rem));
  margin: 6rem auto 0;
  border-top: 0;
}
.ad-cta--contained .ad-cta__block {
  width: auto;
  padding: 4.5rem 3.5rem 5rem;
}
.ad-cta--contained .ad-cta__heading {
  font-size: clamp(2.25rem, 4.4vw, 3.5rem);
  text-wrap: balance;
}
.ad-cta--contained .ad-cta__mark {
  right: -5%;
  bottom: -42%;
  width: min(56%, 540px);
}

/* ---------------------------------------------------------------
   Responsive
   --------------------------------------------------------------- */
@media (max-width: 1080px) {
  .ad-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
  .ad-hero__collage { max-width: 520px; }
  .ad-benefits { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ad-benefits__head .ad-head { position: static; }
}
@media (max-width: 880px) {
  .ad-head { grid-template-columns: minmax(0, 1fr); }
  .ad-head__body { justify-self: start; }
  .ad-steps { grid-template-columns: minmax(0, 1fr); }
  .ad-steps__item,
  .ad-steps__item:nth-child(odd) { padding: 2.25rem 0; border-right: 0; }
  .ad-steps__item:not(:last-child) { border-bottom: var(--double); }
  .ad-oversight,
  .ad-roles { grid-template-columns: minmax(0, 1fr); }
  .ad-role,
  .ad-role:first-child { padding: 2rem 0; }
  .ad-role + .ad-role { border-left: 0; border-top: var(--double); }
  .ad-oversight__item,
  .ad-oversight__item:first-child { padding: 2rem 0; }
  .ad-oversight__item + .ad-oversight__item { border-left: 0; border-top: 4px double rgba(255, 255, 255, 0.6); }
  /* One column: the heading runs the full width, so the field becomes a cap
     in the band's top padding and the lens a corner arc above it */
  .ad-band__lines { width: 60%; height: 3.5rem; }
  .ad-band__lens { --d: 220px; right: -90px; top: -152px; }
  .ad-logos__box { flex-direction: column; align-items: stretch; gap: 1.25rem; text-align: center; }
  .ad-cta__block { padding: 5rem 0 9rem; }
  .ad-cta__mark { width: 90%; bottom: -30%; }
}

/* One column on narrow screens, in order */
@media (max-width: 880px) {
  .ad-uc { column-count: 1; }
  .ad-uc__item:nth-child(4) { break-before: auto; padding-top: 0; }
}

@media (max-width: 640px) {
  .ad-section { padding: 4.5rem 0; }
  .ad-section--tight { padding-top: 1rem; }
  .ad-section--open { padding-top: 3rem; }
  .ad-section--flush { padding-bottom: 0; }
  .ad-hero { padding: 3rem 0 4.5rem; }
  .ad-band { padding: 4.5rem 0; }
  .ad-actions .btn { flex: 1 1 100%; }
  .ad-tile__block { padding: 1.25rem; }
  .ad-steps__num { font-size: 3.5rem; }
  .ad-benefits__row { grid-template-columns: 2rem minmax(0, 1fr); }
  .ad-benefits__row .ad-text { grid-column: 2; }
  .ad-cta__block { width: calc(100% - 2rem); }
  .ad-cta--contained { width: calc(100% - 2rem); margin-top: 4rem; }
  .ad-cta--contained .ad-cta__block { width: auto; padding: 3rem 1.5rem 6rem; }
  .ad-cta--contained .ad-cta__mark { width: 90%; bottom: -24%; }
}

/* ===============================================================
   Inner pages

   Pricing, About, Partners, Request a demo and the use cases, in the same
   vocabulary as the home page: block + field tiles, double rules, display
   numbers and focal dots. Shared pieces come from partials/ad.njk.
   =============================================================== */

/* The .ad-tile--{tone} classes only set variables, so everything below
   reads them with the primary as the fallback */
.ad-tile--primary { --tone: var(--primary); --tone-line: var(--primary); }

/* ---------------------------------------------------------------
   Page intro: the heading beside one block + field tile, which bleeds
   off the right edge of the viewport
   --------------------------------------------------------------- */
.ad-intro {
  padding: 5rem 0 6rem;
  overflow-x: clip;
}
.ad-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: end;
  gap: 4rem;
}
.ad-intro__heading {
  max-width: 16ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.4vw, 4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--foreground);
  text-wrap: balance;
}
.ad-intro__body {
  max-width: 34rem;
  margin: 1.75rem 0 0;
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--muted-foreground);
}
/*
  The tile ends at the content edge, in line with the header button and
  the sections below, and its lines are a hairline lighter than elsewhere:
  it opens the page as an accent, so it stays quieter than the heading.
  The height is a whole number of line gaps plus one line, so a level field
  has a line on its bottom edge as well as its top and ends where the block
  does. The lens sits on the seam between block and field, as the home
  hero's video does, so all three share an edge and nothing floats.
*/
.ad-intro__art {
  --rows: 18;
  --weight: 1px;
  position: relative;
  display: grid;
  grid-template-columns: 24% 1fr;
  height: calc(var(--rows) * 12px + var(--weight));
}
.ad-intro__block { background: var(--tone, var(--primary)); }
.ad-intro__field { --tx: var(--tone-line, var(--primary)); }
.ad-intro__lens {
  --d: 72px;
  --tx: var(--tone-line, var(--primary));
  left: 24%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Without the tile: one centred column, as the inner pages opened on master */
.ad-intro--plain .ad-intro__grid { grid-template-columns: minmax(0, 1fr); }
.ad-intro--plain .ad-intro__copy { text-align: center; }
.ad-intro--plain .ad-intro__heading { max-width: 20ch; margin-inline: auto; }
.ad-intro--plain .ad-intro__body { max-width: 42rem; margin-inline: auto; }
.ad-intro--plain .ad-actions,
.ad-intro--plain .ad-dots--inline { justify-content: center; }

/* A section head with a bare heading takes the full row */
.ad-head:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }

/* ---------------------------------------------------------------
   Pricing: three plans between double rules. The featured plan is a
   purple block that overhangs the rules, with a cap of upright lines in
   the overhang.
   --------------------------------------------------------------- */
.ad-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 2rem 0;
  padding: 0;
  list-style: none;
  border-block: var(--double);
}
.ad-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.75rem 2.5rem;
}
.ad-plan:first-child { padding-left: 0; }
.ad-plan + .ad-plan { border-left: var(--double); }
.ad-plan.ad-plan--featured,
.ad-plan--featured + .ad-plan { border-left: 0; }
.ad-plan--featured {
  margin-block: -2rem;
  padding-block: 4.75rem;
  overflow: hidden;
  background: var(--primary);
  color: #fff;
}
.ad-plan--featured:first-child { padding-left: 2.5rem; }
.ad-plan__lines {
  --tx: rgba(255, 255, 255, 0.28);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2rem;
}
.ad-plan__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  /* Held to the badge's height so every plan's price starts on one line */
  min-height: 1.75rem;
}
.ad-plan__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--foreground);
}
/* shadcn's badge, inverted for the purple block */
.ad-plan__badge {
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.25;
}
.ad-plan__price {
  margin: 2.25rem 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 4.4vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--foreground);
}
.ad-plan__per {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted-foreground);
}
.ad-plan__note {
  max-width: 26ch;
  margin: 0 0 2.25rem;
  line-height: 1.55;
  color: var(--muted-foreground);
}
.ad-plan--featured :is(.ad-plan__name, .ad-plan__price, .ad-plan__per, .ad-plan__note) { color: #fff; }
.ad-plan__cta { margin-top: auto; align-self: flex-start; }
.ad-plan--featured :focus-visible { outline-color: #fff; }

/* ---------------------------------------------------------------
   Pricing: the comparison table, ruled like the rest of the page. The
   featured column carries a wash of lilac down from its block.
   --------------------------------------------------------------- */
.theme-shadcn .features { font-size: 0.9375rem; }
.theme-shadcn .features__scroll { border-bottom: var(--double); }
.theme-shadcn .features th,
.theme-shadcn .features td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border);
  color: var(--secondary-foreground);
}
.theme-shadcn .features__label { padding-left: 0; }
.theme-shadcn .features thead th {
  padding-block: 1.25rem;
  border-bottom: var(--double);
  background: var(--background);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--foreground);
}
.theme-shadcn .features__group th,
.theme-shadcn .features__group td {
  padding-top: 2.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--rule);
  background: none;
}
.theme-shadcn .features__group th {
  padding-left: 0;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--foreground);
}
.theme-shadcn .features .is-featured,
.theme-shadcn .features__group .is-featured { background: #f8f4fe; }
.theme-shadcn .features thead .is-featured { color: var(--primary); }

/* Included: a check in the primary. Not included: a quiet zinc dash. */
.theme-shadcn .tick--on { background: none; }
.theme-shadcn .tick--on::after {
  left: 8px;
  top: 3px;
  width: 7px;
  height: 14px;
  border-color: var(--primary);
  border-width: 0 2.5px 2.5px 0;
}
.theme-shadcn .tick--off::after { background: #d4d4d8; }
.theme-shadcn .features__hint { text-align: left; color: var(--muted-foreground); }
.theme-shadcn .features__bar.is-on { border-radius: 0; background: var(--accent); }
.theme-shadcn .features__bar-thumb { border-radius: 0; }

/* ---------------------------------------------------------------
   FAQ: the theme's head, then the controls beside the questions, which
   sit between double rules with hairlines between them
   --------------------------------------------------------------- */
.ad-faq .faq-section__inner {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 4rem;
  margin-top: 0;
}
.ad-faq .faq-rail { top: 8rem; }
/* The head stacks in the rail, a step smaller than a full-width one */
.ad-faq .ad-head {
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 2.25rem;
}
.ad-faq .ad-heading { font-size: clamp(2.125rem, 3.4vw, 3rem); }
.ad-faq .ad-head__body {
  justify-self: start;
  font-size: 1.0625rem;
}
.theme-shadcn .faq-toggle {
  margin-top: 0;
  font-size: 0.9375rem;
  color: var(--foreground);
}
.theme-shadcn .faq-toggle:hover { color: var(--primary); }
.theme-shadcn .faq-toggle__icon {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  box-shadow: var(--shadow-xs);
}
.theme-shadcn .faq-toggle:hover .faq-toggle__icon { background: var(--accent); }
.theme-shadcn .faq-rail__contact {
  margin-top: 2rem;
  padding-left: 1.25rem;
  border-left: var(--double);
}
.theme-shadcn .faq-rail__contact:hover { border-left-color: var(--primary); }
.theme-shadcn .faq-rail__contact-text { color: var(--muted-foreground); }
.theme-shadcn .faq-rail__contact-link,
.theme-shadcn .faq-rail__contact:hover .faq-rail__contact-link {
  color: var(--primary);
  font-weight: 700;
}

.theme-shadcn .faq {
  border: 0;
  border-block: var(--double);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.theme-shadcn .faq > li + li { border-top: 1px solid var(--border); }
.theme-shadcn .faq__item:hover { background: none; }
.theme-shadcn .faq__q {
  align-items: center;
  padding: 1.375rem 0;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--foreground);
}
.theme-shadcn .faq__q-text {
  background: none;
  -webkit-text-fill-color: currentColor;
  transition: color var(--ease);
}
.theme-shadcn .faq__q:hover .faq__q-text {
  color: var(--primary);
  -webkit-text-fill-color: currentColor;
}
.theme-shadcn .faq__icon,
.theme-shadcn .faq__q:hover .faq__icon,
.theme-shadcn .faq__item[open] .faq__icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0;
  background: none;
}
.theme-shadcn .faq__icon::before,
.theme-shadcn .faq__icon::after {
  width: 14px;
  margin-left: -7px;
  background-color: var(--foreground);
}
.theme-shadcn .faq__q:hover .faq__icon::before,
.theme-shadcn .faq__q:hover .faq__icon::after,
.theme-shadcn .faq__item[open] .faq__icon::before,
.theme-shadcn .faq__item[open] .faq__icon::after { background-color: var(--primary); }
.theme-shadcn .faq__a {
  max-width: 62ch;
  padding: 0 3rem 1.5rem 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted-foreground);
}
.theme-shadcn .faq__a a,
.theme-shadcn .faq__a a:hover { color: var(--primary); font-weight: 700; }

/* ---------------------------------------------------------------
   Contact: the form set across a purple block that carries the ask.
   The block runs the full width; the form sits in its right side,
   starting a little below its top and overhanging its bottom.
   --------------------------------------------------------------- */
.ad-contact-section { padding: 5rem 0 6rem; }
.ad-contact {
  --form: 32rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--form)) 3rem;
  grid-template-rows: 3rem auto 4.5rem;
}
.ad-contact__block {
  position: relative;
  grid-column: 1 / -1;
  grid-row: 1 / 3;
  overflow: hidden;
  /* The copy stays clear of the form's column */
  padding: 4.5rem calc(var(--form) + 7rem) 11rem 3.5rem;
  background: var(--primary);
  color: #fff;
}
.ad-contact__heading {
  max-width: 13ch;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.4vw, 4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.015em;
  color: #fff;
}
.ad-contact__body {
  max-width: 28rem;
  margin: 1.75rem 0 0;
  font-size: 1.1875rem;
  line-height: 1.6;
}
.ad-contact__lines {
  --tx: rgba(255, 255, 255, 0.26);
  --gap: 14px;
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% - var(--form) - 6rem);
  height: 7rem;
}
/* Held to the foot of its area, so it always overhangs the block by the
   last row, however tall the copy beside it runs */
.ad-contact__form {
  position: relative;
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: end;
}

/* The form card itself: square, ruled in ink, lifted off the block */
.theme-shadcn .contact__card {
  padding: 2.25rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--background);
  box-shadow: 0 24px 48px -28px rgba(9, 9, 11, 0.55);
  color: var(--foreground);
}
.theme-shadcn .contact__card .eyebrow {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  color: var(--foreground);
}
.theme-shadcn .contact__card .eyebrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}
.theme-shadcn .field__label {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--foreground);
}
.theme-shadcn .field__req { margin-left: 0.125rem; color: var(--primary); }
.theme-shadcn .field__input {
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--background);
  box-shadow: var(--shadow-xs);
  font-size: 0.9375rem;
  color: var(--foreground);
  transition: border-color var(--ease), box-shadow var(--ease);
}
.theme-shadcn .field__input::placeholder { color: #a1a1aa; }
.theme-shadcn .field__input:focus-visible {
  outline: none;
  border-color: var(--primary);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 3px rgba(146, 81, 239, 0.2);
}
.theme-shadcn .form__submit { width: 100%; margin-top: 0.25rem; }

/* ---------------------------------------------------------------
   A link to another page, between ink hairlines, with no icon (built by linkCard in partials/icons.njk)
   --------------------------------------------------------------- */
.theme-shadcn .link-card {
  gap: 1rem;
  max-width: none;
  margin: 3.5rem 0 0;
  padding: 1.25rem 0;
  border: 0;
  border-block: 1px solid var(--rule);
  border-radius: 0;
}
.theme-shadcn .link-card + .link-card { margin-top: -1px; }
.theme-shadcn .link-card:hover { background: none; }
.theme-shadcn .link-card__icon { display: none; }
.theme-shadcn .link-card__text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
}
.theme-shadcn .link-card__text strong {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--foreground);
}
.theme-shadcn .link-card__link {
  font-weight: 700;
  color: var(--primary);
}
.theme-shadcn .link-card:hover .link-card__link { text-decoration: underline; text-underline-offset: 4px; }
.theme-shadcn .link-card__arrow { color: var(--primary); }

/* ---------------------------------------------------------------
   Request a demo: the steps as a path. Three lenses joined by a
   double line, the last one filled: where the call ends up. As the
   row arrives each lens lands, then the line runs on to the next.
   --------------------------------------------------------------- */
.ad-path {
  --node: 64px;
  --col-gap: 2.5rem;
  --step: 0.55s;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--col-gap);
  margin: 0;
  padding: 3rem 0;
  list-style: none;
  border-block: var(--double);
}
.ad-path__item {
  position: relative;
  display: grid;
  align-content: start;
  gap: 1.75rem;
}
.ad-path__node {
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  border: calc(var(--node) / 8) solid var(--primary);
  border-radius: 50%;
  background: var(--background);
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1;
  color: var(--primary);
}
.ad-path__item:last-child .ad-path__node {
  background: var(--primary);
  color: var(--primary-foreground);
}
/* The connector: from this lens to the next, clear of both */
.ad-path__item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--node) / 2 - 2px);
  left: calc(var(--node) + 0.75rem);
  right: calc(0.75rem - var(--col-gap));
  height: 4px;
  border-block: 1px solid var(--primary);
  transform-origin: left center;
}
.ad-path__body .ad-text { max-width: 26rem; }

/* The reveal. The list itself stays put; its parts arrive in order. */
.theme-shadcn.is-js [data-reveal="path"] { opacity: 1; transform: none; }
.theme-shadcn.is-js [data-reveal="path"] .ad-path__node {
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.35s ease-out, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              background-color 0.4s ease-out, color 0.4s ease-out;
  transition-delay: calc(var(--i) * var(--step) * 2);
}
.theme-shadcn.is-js [data-reveal="path"] .ad-path__item:last-child .ad-path__node {
  background: var(--background);
  color: var(--primary);
}
.theme-shadcn.is-js [data-reveal="path"] .ad-path__item::after {
  transform: scaleX(0);
  transition: transform var(--step) cubic-bezier(0.65, 0, 0.35, 1);
  transition-delay: calc((var(--i) * 2 + 0.6) * var(--step));
}
.theme-shadcn.is-js [data-reveal="path"] .ad-path__body {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-delay: calc(var(--i) * var(--step) * 2 + 0.15s);
}
.theme-shadcn.is-js [data-reveal="path"].is-revealed .ad-path__node,
.theme-shadcn.is-js [data-reveal="path"].is-revealed .ad-path__body {
  opacity: 1;
  transform: none;
}
.theme-shadcn.is-js [data-reveal="path"].is-revealed .ad-path__item::after { transform: none; }
/* The last lens fills once it has landed */
.theme-shadcn.is-js [data-reveal="path"].is-revealed .ad-path__item:last-child .ad-path__node {
  background: var(--primary);
  color: var(--primary-foreground);
  transition-delay: calc(var(--i) * var(--step) * 2), calc(var(--i) * var(--step) * 2),
                    calc(var(--i) * var(--step) * 2 + 0.45s), calc(var(--i) * var(--step) * 2 + 0.45s);
}
@media (prefers-reduced-motion: reduce) {
  .theme-shadcn.is-js [data-reveal="path"] .ad-path__node,
  .theme-shadcn.is-js [data-reveal="path"] .ad-path__body,
  .theme-shadcn.is-js [data-reveal="path"] .ad-path__item::after {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------
   About: the story beside the portrait. The portrait is the art
   direction's photograph: black and white, over a purple block at its
   foot and a line field at its shoulder.
   --------------------------------------------------------------- */
.ad-story {
  display: grid;
  grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);
  gap: 5rem;
  align-items: start;
}
.ad-story__heading { margin-bottom: 2.5rem; }
.ad-story__body p {
  margin: 0 0 1.5rem;
  font-size: 1.1875rem;
  line-height: 1.65;
  color: var(--secondary-foreground);
}
.ad-story__body p:last-child { margin-bottom: 0; }
/* Bold marks the thing that failed, in the darkest ink, not a colour */
.ad-story__body strong { font-weight: 700; color: var(--foreground); }

/* The pull quote between double rules */
.ad-story__body .ad-quote {
  margin: 2.75rem 0;
  padding: 2rem 0;
  border-block: var(--double);
  font-family: var(--font-display);
  font-size: clamp(1.875rem, 3.2vw, 2.75rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--foreground);
}

.ad-story__signoff {
  position: sticky;
  top: 8rem;
  display: grid;
  gap: 1.5rem;
  justify-items: start;
  width: 100%;
  max-width: 26rem;
  margin: 0 0 0 auto;
}
.ad-portrait {
  position: relative;
  width: 100%;
  padding: 2.5rem 2.5rem 2.5rem 0;
}
.ad-portrait__block {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58%;
  height: 62%;
  background: var(--primary);
}
.ad-portrait__lines {
  position: absolute;
  left: 30%;
  top: 0;
  right: 0;
  height: 45%;
}
.ad-portrait__photo {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}
.ad-story__who { display: grid; gap: 0.125rem; }

/* ---------------------------------------------------------------
   About: what it monitors. Prose on the left; the protocols on the
   right as a lilac block with a lilac line field at its corner.
   --------------------------------------------------------------- */
.ad-monitors {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 5rem;
  align-items: start;
}
.ad-prose p {
  margin: 0 0 1.25rem;
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--secondary-foreground);
}
.ad-prose p:last-child { margin-bottom: 0; }
.ad-protocols {
  position: relative;
  padding: 2.5rem 0 0 2.5rem;
}
.ad-protocols__lines {
  --tx: var(--lilac-line);
  position: absolute;
  left: 0;
  top: 0;
  width: 55%;
  height: 55%;
}
.ad-protocols__block {
  position: relative;
  padding: 1.25rem 2.25rem 2rem;
  background: var(--lilac);
}
.ad-protocols__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ad-protocols__list li {
  position: relative;
  padding: 1rem 0 1rem 1.75rem;
  border-bottom: 1px solid var(--lilac-line);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--rule);
}
.ad-protocols__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--primary);
}
.ad-protocols__note {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--secondary-foreground);
}

/* ---------------------------------------------------------------
   Bands: two and four columns, and the ink band
   --------------------------------------------------------------- */
.ad-oversight--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 60rem;
}
.ad-oversight--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ad-oversight--four .ad-oversight__item { padding-inline: 2rem; }
.ad-oversight--four .ad-oversight__item:first-child { padding-left: 0; }

.ad-band--ink { background: var(--rule); }
.ad-band--ink .ad-band__lines { --tx: rgba(255, 255, 255, 0.14); }
.ad-band--ink .ad-band__lens { --tx: rgba(255, 255, 255, 0.07); }
.ad-band--ink .ad-head--light .ad-eyebrow::before { background: var(--primary); }
.ad-band--ink .ad-text { color: #d4d4d8; }
.ad-band--ink .ad-oversight__item + .ad-oversight__item { border-left-color: rgba(255, 255, 255, 0.35); }

/* ---------------------------------------------------------------
   Landing pages (Magento security, Tripwire alternative): the scope
   list keeps a reading measure instead of running the full width, and
   the line under the comparison table sits quietly below its rule.
   --------------------------------------------------------------- */
.ad-dots--measure { max-width: 48rem; }
.ad-note {
  margin: 1.25rem 0 0;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* ---------------------------------------------------------------
   Columns between double rules (Partners: your clients' experience)
   --------------------------------------------------------------- */
.ad-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-block: var(--double);
}
.ad-cols__item { padding: 2.5rem; }
.ad-cols__item:first-child { padding-left: 0; }
.ad-cols__item + .ad-cols__item { border-left: var(--double); }

/*
  Partners: the tour on one lilac tile, in the same quiet register as the
  intro tiles and use-case cards. It stays within the content width: hairline
  lines in the upper half, the soft block in the lower, and the still across
  the seam with room either side, so the tile frames the video rather than
  competing with it.
*/
.ad-stage__frame {
  --weight: 1px;
  position: relative;
  padding: 3rem 0;
}
.ad-stage__lines {
  --tx: var(--lilac-line);
  position: absolute;
  inset: 0 0 50% 0;
}
.ad-stage__block {
  position: absolute;
  inset: 50% 0 0 0;
  background: var(--lilac);
}
.ad-stage__video {
  position: relative;
  left: auto;
  top: auto;
  width: min(100% - 6rem, 920px);
  margin-inline: auto;
  transform: none;
}
.ad-stage__caption {
  margin: 1.25rem 0 0;
  font-size: 0.9375rem;
  color: var(--muted-foreground);
  text-align: center;
}

@media (max-width: 640px) {
  .ad-stage__frame { padding: 1.5rem 0; }
  .ad-stage__video { width: calc(100% - 2rem); }
}
.ad-hero__copy > .ad-eyebrow { margin-bottom: 1.5rem; }

/* ---------------------------------------------------------------
   Use cases: the lead article across a block + field, then the rest
   in a two-column grid. Both split on the page's centre line, under the
   centred heading, and the double rule between them has equal air above
   and below
   --------------------------------------------------------------- */
.ad-meta {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted-foreground);
}
.ad-feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 5rem;
  color: inherit;
  text-decoration: none;
}
.ad-feature__collage {
  position: relative;
  aspect-ratio: 16 / 11;
}
.ad-feature__block {
  position: absolute;
  inset: 0 55% 0 0;
  background: var(--primary);
}
.ad-feature__lines {
  position: absolute;
  inset: 0 0 0 45%;
}
.ad-feature__media {
  position: absolute;
  left: 7%;
  top: 50%;
  width: 86%;
  height: auto;
  border: 1px solid var(--rule);
  background: #fff;
  box-shadow: 0 20px 40px -24px rgba(9, 9, 11, 0.45);
  transform: translateY(-50%);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.ad-feature:hover .ad-feature__media { transform: translateY(-50%) scale(1.02); }
.ad-feature__title,
.ad-post__title {
  margin: 0.75rem 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--foreground);
  text-wrap: balance;
}
.ad-post__title { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.ad-feature__excerpt,
.ad-post__excerpt {
  margin: 0 0 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--secondary-foreground);
}
.ad-feature:hover .ad-more,
.ad-post:hover .ad-more { text-decoration: underline; text-underline-offset: 4px; }
.ad-feature:focus-visible,
.ad-post:focus-visible { outline-offset: 8px; }

.ad-posts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4.5rem 5rem;
  margin: 5rem 0 0;
  padding: 5rem 0 0;
  list-style: none;
  border-top: var(--double);
}
.ad-post {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* A framed shot with one offset backdrop: a tone block below-left, or a
   line field above-right */
.ad-shot {
  position: relative;
  margin: 0 0 3rem 1.5rem;
}
.ad-shot--lines { margin: 1.5rem 1.5rem 1.5rem 0; }
.ad-shot__back {
  position: absolute;
  inset: 1.5rem 1.5rem -1.5rem -1.5rem;
}
.ad-shot--block .ad-shot__back { background-color: var(--tone, var(--primary)); }
.ad-shot--lines .ad-shot__back {
  --tx: var(--tone-line, var(--primary));
  inset: -1.5rem -1.5rem 1.5rem 1.5rem;
}
.ad-shot__media {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--rule);
  background: #fff;
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.ad-post:hover .ad-shot--block .ad-shot__media { transform: translate(0.375rem, -0.375rem); }
.ad-post:hover .ad-shot--lines .ad-shot__media { transform: translate(-0.375rem, 0.375rem); }

/* ---------------------------------------------------------------
   Use-case article: one reading column, the hero art breaking out of
   it across a block + field
   --------------------------------------------------------------- */
.ad-article__head,
.ad-article__body,
.ad-article__column { max-width: 760px; }
.ad-article__head { padding: 4.5rem 0 3.5rem; }
.ad-article__back {
  margin: 0 0 2rem;
  font-size: 0.9375rem;
}
.ad-article__back a {
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color var(--ease);
}
.ad-article__back a:hover { color: var(--foreground); }
.ad-article__title {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.4vw, 3.5rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--foreground);
  text-wrap: balance;
}
.ad-article__hero {
  position: relative;
  width: min(100%, 1000px);
  margin-inline: auto;
  padding: 2rem;
}
.ad-article__block {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46%;
  height: 64%;
  background: var(--primary);
}
.ad-article__lines {
  position: absolute;
  right: 0;
  top: 0;
  width: 42%;
  height: 56%;
}
.ad-article__hero img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  background: #fff;
}

.ad-article__body { padding-top: 3.5rem; }
.ad-article__body > :first-child { margin-top: 0; }
.ad-article__body > :last-child { margin-bottom: 0; }
.ad-article__body h2 {
  margin: 3.25rem 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 2.6vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--foreground);
}
.ad-article__body p,
.ad-article__body li {
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--secondary-foreground);
}
.ad-article__body p { margin: 0 0 1.25rem; }
.ad-article__body strong { font-weight: 700; color: var(--foreground); }
.ad-article__body a { color: var(--primary); font-weight: 700; }
.ad-article__body ul {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.ad-article__body li {
  position: relative;
  margin-bottom: 0.625rem;
  padding-left: 1.5rem;
}
.ad-article__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}
.ad-article__body code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--lilac);
  color: var(--rule);
  font-size: 0.9em;
  /* Paths like C:\Windows\System32 must not wrap mid-segment invisibly */
  word-break: break-word;
}
.ad-article__body .figure { margin: 2.75rem 0; }
.ad-article__body .figure__link,
.ad-article__body .figure__link img { border-radius: 0; }
.ad-article__body .figure__link img { border: 1px solid var(--border); }
.ad-article__body .figure__caption {
  margin-top: 0.875rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted-foreground);
}

/* ---------------------------------------------------------------
   Article diagrams (partials/diagram.njk)

   The use-case articles are blog pages, so their diagrams are livelier
   than the marketing pages: coloured product illustrations in the manner
   of the articles' hero images. White cards on a tinted canvas, and colour
   that means something: rose for what was lost or is suspect, emerald for
   what was restored or is expected, amber for what changed, purple for
   Alertica. They break out of the 760px reading column to the hero's
   1000px.

   The article body styles every p, li and code for prose, so the first
   rules take that back inside a diagram, and every rule after them is
   written .dg .x to come later at the same weight.
   --------------------------------------------------------------- */
.ad-article__body .dg {
  --dg-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  width: min(1000px, calc(100vw - 2rem));
  margin: 3.25rem calc((100% - min(1000px, 100vw - 2rem)) / 2);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--secondary-foreground);
}
.ad-article__body .dg :where(p, li) {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.ad-article__body .dg li::before { content: none; }
.ad-article__body .dg :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ad-article__body .dg code {
  padding: 0;
  border-radius: 0;
  background: none;
  font-family: var(--dg-mono);
  font-size: 0.8125rem;
  color: var(--rule);
  word-break: normal;
  overflow-wrap: anywhere;
}

.dg {
  --rose: #e11d48;
  --rose-soft: #ffe4e6;
  --amber: #d97706;
  --amber-soft: #fef3c7;
  --emerald: #059669;
  --emerald-soft: #d1fae5;
  --indigo: #4f46e5;
  --indigo-soft: #e0e7ff;
  --sky: #0284c7;
  --sky-soft: #e0f2fe;
  --slate: #475569;
  --slate-soft: #f1f5f9;
  --tone: var(--primary);
  --tone-soft: var(--lilac);
  --card-shadow: 0 1px 2px rgba(17, 12, 46, 0.06), 0 14px 30px -16px rgba(76, 29, 149, 0.4);
  /* The arrows between cards: dashed, in the colour of what moves along them */
  --arrow-purple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 14'%3E%3Cpath d='M2 7h40' stroke='%239251ef' stroke-width='2' stroke-dasharray='4 4' stroke-linecap='round'/%3E%3Cpath d='M38 2l6 5-6 5' fill='none' stroke='%239251ef' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --arrow-rose: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 14'%3E%3Cpath d='M2 7h40' stroke='%23e11d48' stroke-width='2' stroke-dasharray='4 4' stroke-linecap='round'/%3E%3Cpath d='M38 2l6 5-6 5' fill='none' stroke='%23e11d48' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --arrow-emerald-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 14'%3E%3Cpath d='M6 7h40' stroke='%23059669' stroke-width='2' stroke-dasharray='4 4' stroke-linecap='round'/%3E%3Cpath d='M10 2 4 7l6 5' fill='none' stroke='%23059669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.dgv-tone--rose { --tone: var(--rose); --tone-soft: var(--rose-soft); }
.dgv-tone--amber { --tone: var(--amber); --tone-soft: var(--amber-soft); }
.dgv-tone--emerald { --tone: var(--emerald); --tone-soft: var(--emerald-soft); }
.dgv-tone--indigo { --tone: var(--indigo); --tone-soft: var(--indigo-soft); }
.dgv-tone--sky { --tone: var(--sky); --tone-soft: var(--sky-soft); }
.dgv-tone--slate { --tone: var(--slate); --tone-soft: var(--slate-soft); }

/* The parts every type shares */
.dg .dg__title {
  margin-bottom: 1.25rem;
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--foreground);
}
.dg .dg__subtitle {
  display: block;
  margin-top: 0.375rem;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--muted-foreground);
}
.dg .dg__footnote {
  margin-top: 0.875rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
}
.dg .dg-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}
.dg code.dg-path {
  display: inline-block;
  max-width: 100%;
  margin-top: 0.875rem;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background: var(--lilac);
}
.dg .dg-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.dg .dg-tag__mark { font-family: var(--dg-mono); }
.dg .dg-tag--added { background: var(--emerald-soft); color: #047857; }
.dg .dg-tag--removed { background: var(--rose-soft); color: #be123c; }
.dg .dg-tag--modified { background: var(--amber-soft); color: #b45309; }
.dg .dg-files {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.875rem;
}
.dg .dg-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.625rem;
}
.dg .dg-file--removed .dg-file__name {
  text-decoration: line-through;
  text-decoration-color: var(--rose);
}
.dg .dg-flag {
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  background: var(--rose);
  font-size: 0.6875rem;
  font-weight: 700;
  color: #fff;
}
.dg .dg-lines {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.875rem;
}
.dg .dgv-title {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--foreground);
}

.dg .dgv-canvas {
  padding: 2rem;
  border-radius: 20px;
  background: linear-gradient(135deg, #f5efff 0%, #fdf0f7 55%, #eef5ff 100%);
}
.dg .dgv-canvas--dark {
  background: linear-gradient(135deg, #1b1035 0%, #2c1659 55%, #3b1a6b 100%);
  color: #ece7f8;
}
.dg .dgv-card {
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--card-shadow);
}
.dg .dgv-badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 12px;
  background: var(--tone-soft);
  color: var(--tone);
}
.dg .dgv-badge .dg-icon { width: 1.375rem; height: 1.375rem; }
.dg .dgv-pill {
  display: inline-block;
  margin-top: 0.875rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: var(--tone-soft);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--tone);
}
.dg .dgv-term {
  margin: 0.875rem 0 0;
  padding: 0.875rem 1rem;
  border-radius: 10px;
  background: #17112b;
  white-space: pre-wrap;
}
.ad-article__body .dg .dgv-term code {
  font-size: 0.78125rem;
  line-height: 1.6;
  color: #cfc8e6;
}
.dg .dgv-term__line { display: block; }
.dg .dgv-term__line--error { color: #fb7185; }
/* Two cards side by side: compare, folders, profiles, the paths by system */
.dg .dgv-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}

/* Stages: three cards, each with its own colour, joined by arrows */
.dg .dgv-stages {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}
.dg .dgv-stage {
  position: relative;
  min-width: 0;
  padding: 1.25rem 1.25rem 1.5rem;
  border-top: 4px solid var(--tone);
}
.dg .dgv-stage + .dgv-stage::before {
  content: "";
  position: absolute;
  top: 2.25rem;
  left: -2.5rem;
  width: 2.5rem;
  height: 14px;
  background: var(--arrow-purple) center / contain no-repeat;
}
.dg .dgv-stage__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.dg .dgv-stage__num {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--tone);
  opacity: 0.3;
}
.dg .dgv-stage__note {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.125rem;
  padding: 0.625rem 0.75rem;
  border-radius: 10px;
  background: var(--lilac);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--primary);
}

/* What a file holds: a card each, its lines in a terminal */
.dg .dgv-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
}
.dg .dgv-item {
  min-width: 0;
  padding: 1.25rem;
  border-top: 4px solid var(--tone);
}
.dg .dgv-item__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.dg .dgv-item .dgv-term { margin-top: 1rem; }

/* The attack life cycle: six chevrons running from blue into red as the
   attack deepens, the loop arched over the two steps it repeats */
.dg .dgv-cycle {
  position: relative;
  padding-top: 2.25rem;
}
.dg .dgv-cycle__list {
  display: grid;
  grid-template-columns: repeat(var(--steps, 6), minmax(0, 1fr));
  gap: 0 0.375rem;
  align-items: start;
}
.dg .dgv-cycle__step { --c: var(--primary); min-width: 0; }
.dg .dgv-cycle__step:nth-child(1) { --c: #0ea5e9; }
.dg .dgv-cycle__step:nth-child(2) { --c: #3b82f6; }
.dg .dgv-cycle__step:nth-child(3) { --c: #6366f1; }
.dg .dgv-cycle__step:nth-child(4) { --c: #8b5cf6; }
.dg .dgv-cycle__step:nth-child(5) { --c: #c026d3; }
.dg .dgv-cycle__step:nth-child(6) { --c: #e11d48; }
.dg .dgv-cycle__head {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  min-height: 6.25rem;
  padding: 0.875rem 1.25rem 0.875rem 1.625rem;
  background: var(--c);
  color: #fff;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
}
.dg .dgv-cycle__step:first-child .dgv-cycle__head {
  padding-left: 1rem;
  border-radius: 10px 0 0 10px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
}
.dg .dgv-cycle__title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.15;
}
.dg .dgv-cycle__text {
  margin: 0.625rem 0.5rem 0 0;
  padding: 0.75rem 0.875rem;
  border-top: 3px solid var(--c);
  border-radius: 0 0 10px 10px;
  background: color-mix(in srgb, var(--c) 9%, #fff);
  font-size: 0.8125rem;
  line-height: 1.5;
}
.dg .dgv-cycle__loop {
  position: absolute;
  top: 0.5rem;
  left: calc((var(--loop) - 0.5) / var(--steps) * 100%);
  width: calc(100% / var(--steps));
  height: 1.75rem;
  border: 2px solid #8b5cf6;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
}
/* The arrowhead, coming down into the step the attack returns to */
.dg .dgv-cycle__loop::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: -7px;
  border-top: 8px solid #8b5cf6;
  border-inline: 6px solid transparent;
}

/* Scheduled scans: a radar of past scans around this one, beside the
   folder as Alertica saw it */
.dg .dgv-scan {
  display: grid;
  grid-template-columns: 12rem repeat(var(--panels, 1), minmax(0, 1fr));
  gap: 2rem;
  align-items: start;
}
.dg .dgv-radar { align-self: center; }
.dg .dgv-radar {
  position: relative;
  width: 12rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle closest-side,
    rgba(196, 167, 255, 0.16) 0 33%, transparent 33% 34%,
    rgba(196, 167, 255, 0.45) 34% 35%, transparent 35% 61%,
    rgba(196, 167, 255, 0.3) 61% 62%, transparent 62% 89%,
    rgba(196, 167, 255, 0.18) 89% 90%, transparent 90%);
}
.dg .dgv-radar__core {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  box-shadow: 0 0 0 8px rgba(146, 81, 239, 0.28);
  transform: translate(-50%, -50%);
}
.dg .dgv-radar__core .dg-icon { width: 1.75rem; height: 1.75rem; }
.dg .dgv-radar__dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.dg .dgv-radar__dot:nth-child(1) { top: 5%; left: 50%; background: #34d399; }
.dg .dgv-radar__dot:nth-child(2) { top: 50%; left: 81%; background: #fbbf24; }
.dg .dgv-radar__dot:nth-child(3) { top: 72%; left: 28%; background: #f472b6; }
.dg .dgv-diff {
  min-width: 0;
  padding: 1.25rem 1.5rem 1.5rem;
  color: var(--secondary-foreground);
}
.dg .dgv-diff__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--primary);
}
.dg .dgv-diff__head code.dg-path { margin-top: 0; }
.dg .dgv-diff__label {
  margin-top: 0.875rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
}
.dg .dgv-diff__rows {
  display: grid;
  gap: 0.625rem;
  margin-top: 1rem;
}
.dg .dgv-diff__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
}
.dg .dgv-diff__row--added { background: #ecfdf5; color: var(--emerald); }
.dg .dgv-diff__row--removed { background: #fff1f2; color: var(--rose); }
.dg .dgv-diff__row--modified { background: #fffbeb; color: var(--amber); }
.dg .dgv-diff__icon { display: inline-flex; }
.dg .dgv-notes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin-top: 1.75rem;
}
.dg .dgv-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
}
.dg .dgv-note__icon { display: inline-flex; color: #c4a7ff; }

/* Scenario: who did what, left to right. The trouble comes in from the
   left; Alertica's alert goes out to the right, and the fix comes back.
   Cards on one row and steps on the next, so the steps line up however
   tall the evidence card runs. */
.dg .dgv-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: 0 3rem;
}
.dg .dgv-actor {
  position: relative;
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  min-width: 0;
}
.dg .dgv-actor__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 12.5rem;
  padding: 1.5rem 1.25rem;
  border-top: 4px solid var(--tone);
  text-align: center;
}
.dg .dgv-actor__card--evidence :is(.dg-files, .dgv-term) { align-self: stretch; text-align: left; }
.dg .dgv-actor__change { margin-top: 0.875rem; }
.dg .dgv-actor + .dgv-actor::before {
  content: "";
  position: absolute;
  top: 5.75rem;
  left: -3rem;
  width: 3rem;
  height: 14px;
  background: var(--arrow-rose) center / contain no-repeat;
}
.dg .dgv-actor:nth-child(3)::before {
  top: 4.75rem;
  background-image: var(--arrow-purple);
}
.dg .dgv-actor:nth-child(3)::after {
  content: "";
  position: absolute;
  top: 6.75rem;
  left: -3rem;
  width: 3rem;
  height: 14px;
  background: var(--arrow-emerald-back) center / contain no-repeat;
}
.dg .dgv-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--tone-soft);
  color: var(--tone);
}
.dg .dgv-avatar .dg-icon { width: 1.75rem; height: 1.75rem; }
.dg .dgv-avatar__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
}
.dg .dgv-tone--slate .dgv-avatar__badge { background: var(--rose); }
.dg .dgv-avatar__badge .dg-icon { width: 0.9375rem; height: 0.9375rem; }
.dg .dgv-actor__label {
  margin-top: 0.875rem;
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--foreground);
}
.dg .dgv-actor__card code.dg-path { margin-top: 1rem; }
.dg .dgv-actor__step {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 1.125rem;
}
.dg .dgv-actor__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: var(--tone);
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
}

/* Pros and cons: a card each, the way Alertica works ringed in purple */
.dg .dgv-compare {
  min-width: 0;
  padding: 1.25rem 1.5rem 1.25rem;
  border-top: 4px solid var(--tone);
}
.dg .dgv-compare.is-featured { box-shadow: 0 0 0 2px var(--primary), var(--card-shadow); }
.dg .dgv-compare__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.dg .dgv-checks {
  display: grid;
  margin-top: 0.5rem;
}
.dg .dgv-check {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}
.dg .dgv-check__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--rose-soft);
  color: var(--rose);
}
.dg .dgv-check.is-plus .dgv-check__mark { background: var(--emerald-soft); color: var(--emerald); }
.dg .dgv-check__mark .dg-icon { width: 0.875rem; height: 0.875rem; stroke-width: 3; }

/* Folders as windows. The file that matters is green where it belongs
   and red where it doesn't. */
.dg .dgv-window {
  min-width: 0;
  overflow: hidden;
}
.dg .dgv-window__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  border-bottom: 1px solid var(--border);
  background: #fbfaff;
}
.dg .dgv-window__dots {
  flex: none;
  width: 2.25rem;
  height: 0.625rem;
  background:
    radial-gradient(circle at 5px 50%, #fb7185 0 4px, transparent 4.5px),
    radial-gradient(circle at 18px 50%, #fbbf24 0 4px, transparent 4.5px),
    radial-gradient(circle at 31px 50%, #34d399 0 4px, transparent 4.5px);
}
.dg .dgv-window__bar .dgv-badge { width: 2.25rem; height: 2.25rem; border-radius: 10px; }
.dg .dgv-window__bar .dgv-badge .dg-icon { width: 1.125rem; height: 1.125rem; }
.dg .dgv-window__path {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 1.25rem 0;
  color: var(--primary);
}
.dg .dgv-window__path code.dg-path { margin-top: 0; }
.dg .dgv-window__files {
  display: grid;
  gap: 0.25rem;
  padding: 0.75rem 1.25rem 1.25rem;
}
.dg .dgv-window__file {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.375rem 0.5rem;
  border-radius: 8px;
  color: var(--muted-foreground);
}
.dg .dgv-window__file .dg-icon { width: 1.125rem; height: 1.125rem; }
.dg .dgv-window__file.is-ok { background: var(--emerald-soft); color: var(--emerald); }
.dg .dgv-window__file.is-alert { background: var(--rose-soft); color: var(--rose); }
.dg .dgv-window__file:is(.is-ok, .is-alert) .dg-file__name { font-weight: 700; }
.dg .dgv-window__mark { display: inline-flex; margin-left: auto; }
.dg .dgv-callnote {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: fit-content;
  max-width: 100%;
  margin: 1.5rem auto 0;
  padding: 0.625rem 1.125rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--card-shadow);
  font-weight: 500;
  color: var(--foreground);
}
.dg .dgv-callnote .dg-icon { color: var(--primary); }

/* Developer profiles: the stack as chips, then what each one ignores and
   what it alerts on */
.dg .dgv-profile {
  min-width: 0;
  padding: 1.25rem 1.5rem 1.5rem;
  border-top: 4px solid var(--tone);
}
.dg .dgv-profile__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.dg .dgv-profile__stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1rem;
  font-size: 0.875rem;
}
.dg .dgv-chip {
  display: inline-block;
  padding: 0.1875rem 0.5rem;
  border-radius: 6px;
  background: var(--tone-soft);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--tone);
}
.dg .dgv-profile__plus { color: var(--muted-foreground); }
.dg .dgv-profile__lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.dg .dgv-profile__list {
  padding: 0.875rem;
  border-radius: 12px;
  background: var(--slate-soft);
}
.dg .dgv-profile__list.is-alert { background: #fff1f2; }
.dg .dgv-profile__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
  font-weight: 700;
  color: var(--slate);
}
.dg .dgv-profile__list.is-alert .dgv-profile__label { color: var(--rose); }
.dg .dgv-profile__label .dg-icon { width: 1rem; height: 1rem; }
.dg .dgv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.ad-article__body .dg code.dgv-chip {
  padding: 0.1875rem 0.5rem;
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e2e8f0;
  font-size: 0.78125rem;
  color: var(--slate);
}
.ad-article__body .dg .is-alert code.dgv-chip {
  box-shadow: inset 0 0 0 1px #fecdd3;
  color: #be123c;
}

/* One technique: the file name with its hidden gap */
.dg .dgv-callout {
  max-width: 40rem;
  margin-inline: auto;
  padding: 1.5rem 1.75rem 1.75rem;
  border-top: 4px solid var(--rose);
}
.dg .dgv-callout__file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: #fff1f2;
}
.dg .dgv-callout__icon {
  display: inline-flex;
  margin-right: 0.375rem;
  color: var(--rose);
}
.dg .dgv-callout__icon .dg-icon { width: 1.75rem; height: 1.75rem; }
.ad-article__body .dg .dgv-callout__file code { font-size: clamp(1.125rem, 2.6vw, 1.5rem); }
.ad-article__body .dg code.dgv-callout__ext { font-weight: 700; color: var(--rose); }
.dg .dgv-callout__gap {
  width: 4rem;
  height: 1.75rem;
  border-radius: 6px;
  background: repeating-linear-gradient(110deg, rgba(225, 29, 72, 0.55) 0 2px, transparent 2px 7px);
}
.dg .dgv-bullets {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.dg .dgv-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.dg .dgv-bullets__icon { display: inline-flex; color: var(--rose); }

/* Paths by system: a card per system */
.dg .dgv-os {
  min-width: 0;
  padding: 1.25rem 1.5rem 1.5rem;
}
.dg .dgv-os__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.dg .dgv-os__head .dg-icon { width: 1.75rem; height: 1.75rem; }
.dg .dgv-os__group { margin-top: 1rem; }
.dg .dgv-os__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
  color: var(--foreground);
}
.dg .dgv-os__label .dg-icon { width: 1rem; height: 1rem; color: var(--primary); }
.dg .dgv-os__paths {
  display: grid;
  justify-items: start;
  gap: 0.375rem;
}
.ad-article__body .dg .dgv-os__paths code {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  background: var(--slate-soft);
  overflow-wrap: normal;
}

/* The upload chart: an indigo line over a soft fill, the threshold dashed
   in rose, and where the line crosses it, the alert */
.dg .dgv-chart {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) 11rem;
  grid-template-areas: "y svg key" ". x key";
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 1.5rem;
}
.dg .dgv-chart__svg {
  grid-area: svg;
  width: 100%;
  height: auto;
  overflow: visible;
}
.dg .dgv-chart__grid { stroke: #ede9fe; stroke-width: 1; }
.dg .dgv-chart__tick { fill: var(--muted-foreground); font-size: 12px; }
.dg .dgv-chart__threshold {
  stroke: var(--rose);
  stroke-width: 1.75;
  stroke-dasharray: 6 5;
}
.dg .dgv-chart__line {
  fill: none;
  stroke: #6366f1;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.dg .dgv-chart__point { fill: #fff; stroke: #6366f1; stroke-width: 2.5; }
.dg .dgv-chart__halo { fill: rgba(225, 29, 72, 0.14); }
.dg .dgv-chart__lens { fill: #fff; stroke: var(--rose); stroke-width: 4; }
.dg .dgv-chart__bubble { fill: var(--rose); }
.dg .dgv-chart__alert { fill: #fff; font-size: 14px; font-weight: 700; }
.dg .dgv-chart__axis--y {
  grid-area: y;
  justify-self: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.8125rem;
}
.dg .dgv-chart__axis--x {
  grid-area: x;
  font-size: 0.8125rem;
  text-align: center;
}
.dg .dgv-chart__key {
  grid-area: key;
  align-self: start;
  display: grid;
  gap: 0.625rem;
  padding: 1rem;
  border-radius: 12px;
  background: #faf8ff;
  font-size: 0.875rem;
}
.dg .dgv-chart__key li {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.dg .dgv-chart__swatch {
  flex: none;
  width: 1.5rem;
  height: 3px;
  border-radius: 2px;
  background: #6366f1;
}
.dg .dgv-chart__swatch--threshold {
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--rose) 0 6px, transparent 6px 10px);
}

@media (max-width: 760px) {
  .dg .dgv-canvas { padding: 1.25rem; border-radius: 16px; }
  .dg :is(.dgv-stages, .dgv-flow, .dgv-scan, .dgv-cycle__list, .dgv-grid, .dgv-pair) { grid-template-columns: minmax(0, 1fr); }
  .dg .dgv-stages,
  .dg .dgv-flow { gap: 2.75rem; }
  /* The arrows turn to run down the page, between the cards */
  .dg .dgv-stage + .dgv-stage::before,
  .dg .dgv-actor + .dgv-actor::before,
  .dg .dgv-actor:nth-child(3)::after {
    top: -1.75rem;
    left: calc(50% - 1.25rem);
    width: 2.5rem;
    transform: rotate(90deg);
  }
  .dg .dgv-actor:nth-child(3)::before { left: calc(50% - 2.75rem); }
  .dg .dgv-actor:nth-child(3)::after { left: calc(50% + 0.25rem); }
  .dg .dgv-flow { grid-template-rows: none; }
  .dg .dgv-actor { display: block; grid-row: auto; }
  .dg .dgv-actor__card { min-height: 0; }
  .dg .dgv-radar { width: 10rem; justify-self: center; }
  .dg .dgv-cycle { padding-top: 0; }
  .dg .dgv-cycle__loop { display: none; }
  .dg .dgv-cycle__list { gap: 0.75rem; }
  .dg .dgv-cycle__head,
  .dg .dgv-cycle__step:first-child .dgv-cycle__head {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: 0;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    clip-path: none;
  }
  .dg .dgv-cycle__text { margin: 0; border-radius: 0 0 10px 10px; }
  .dg .dgv-callnote { border-radius: 14px; text-align: left; }
  .dg .dgv-profile__lists { grid-template-columns: minmax(0, 1fr); }
  .dg .dgv-chart {
    grid-template-columns: 1.25rem minmax(0, 1fr);
    grid-template-areas: "y svg" ". x" "key key";
    padding: 1rem;
  }
  .dg .dgv-chart__tick { font-size: 20px; }
  .dg .dgv-chart__alert { font-size: 18px; }
}

/* Read next: one row between double rules */
/* After the contained close, on the same 1000px track and left edge */
.ad-next { padding: 4.5rem 0 7rem; }
.ad-next__inner {
  width: min(1000px, calc(100% - 4rem));
  margin-inline: auto;
}
.ad-next__heading {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--foreground);
}
.ad-next__link {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
  padding: 1.75rem 0;
  border-block: var(--double);
  color: inherit;
  text-decoration: none;
}
.ad-next__media {
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
}
.ad-next__title {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--foreground);
  transition: color var(--ease);
}
.ad-next__link:hover .ad-next__title { color: var(--primary); }
.ad-next .ad-text { margin-bottom: 0.75rem; }

/* ---------------------------------------------------------------
   Legal pages: the article's reading column, its type and its dots.
   The dates sit on a double rule under the heading, as the page sits
   on the header's.
   --------------------------------------------------------------- */
.theme-shadcn .wrap.prose:not(.prose--article) {
  max-width: 760px;
  margin-top: 0;
  padding: 4.5rem 0 7rem;
}
.theme-shadcn .prose h1 {
  margin: 0 0 1.25rem;
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4.4vw, 3.5rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--foreground);
  text-wrap: balance;
}
.theme-shadcn .prose__meta {
  gap: 0.25rem 1.75rem;
  margin-bottom: 2.75rem;
  padding-bottom: 1.75rem;
  border-bottom: var(--double);
  font-size: 0.9375rem;
  color: var(--muted-foreground);
}
/* The gap separates the two dates; the pipe was left dangling at the start
   of the second line when they wrap on a phone */
.theme-shadcn .prose__meta span + span::before { display: none; }
.theme-shadcn .prose h2 {
  margin: 3rem 0 1rem;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--foreground);
}
.theme-shadcn .prose h3 {
  margin: 2rem 0 0.75rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--foreground);
}
.theme-shadcn .prose p,
.theme-shadcn .prose li {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--secondary-foreground);
}
.theme-shadcn .prose strong { color: var(--foreground); }
.theme-shadcn .prose a { color: var(--primary); font-weight: 700; }
.theme-shadcn .prose ul {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.theme-shadcn .prose li {
  position: relative;
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
}
.theme-shadcn .prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
}

/* ---------------------------------------------------------------
   404: the ways back as rows between rules, a barrel on each
   --------------------------------------------------------------- */
.ad-nf__action { margin: 2.25rem 0 0; }
.ad-nf {
  margin: 3rem 0 0;
  padding: 0;
  list-style: none;
  border-block: var(--double);
}
.ad-nf li + li { border-top: 1px solid var(--rule); }
.ad-nf__link {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: 1.5rem;
  padding: 1.75rem 0;
  color: inherit;
  text-decoration: none;
}
.ad-nf__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.05;
  color: var(--foreground);
  transition: color var(--ease);
}
.ad-nf__link .ad-text { margin: 0; }
.ad-nf__arrow {
  display: inline-flex;
  color: var(--primary);
  transition: transform var(--ease);
}
.ad-nf__link:hover .ad-nf__title { color: var(--primary); }
.ad-nf__link:hover .ad-nf__arrow { transform: translateX(4px); }
@media (max-width: 640px) {
  .ad-nf__link { grid-template-columns: 2rem minmax(0, 1fr) auto; row-gap: 0.75rem; }
  .ad-nf__link .ad-text { grid-column: 2 / 4; grid-row: 2; }
}

/* ---------------------------------------------------------------
   Inner pages, responsive
   --------------------------------------------------------------- */
@media (max-width: 1080px) {
  .ad-intro__grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .ad-intro__art { --rows: 13; max-width: 30rem; }

  /* The path turns to run down the page, the line on the lenses' axis */
  .ad-path {
    --node: 56px;
    --row-gap: 2.5rem;
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--row-gap);
    padding: 2.5rem 0;
  }
  .ad-path__item {
    grid-template-columns: var(--node) minmax(0, 1fr);
    gap: 1.5rem;
  }
  .ad-path__body { padding-top: 0.75rem; }
  .ad-path__item:not(:last-child)::after {
    top: calc(var(--node) + 0.75rem);
    bottom: calc(0.75rem - var(--row-gap));
    left: calc(var(--node) / 2 - 2px);
    right: auto;
    width: 4px;
    height: auto;
    border-block: 0;
    border-inline: 1px solid var(--primary);
    transform-origin: center top;
  }
  .theme-shadcn.is-js [data-reveal="path"] .ad-path__item::after { transform: scaleY(0); }

  .ad-story { grid-template-columns: minmax(0, 1fr) minmax(0, 18rem); gap: 3.5rem; }

  .ad-oversight--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ad-oversight--four .ad-oversight__item { padding: 2rem 2rem 2rem 0; }
  .ad-oversight--four .ad-oversight__item:nth-child(even) { padding-left: 2rem; }
  .ad-oversight--four .ad-oversight__item:nth-child(odd) { border-left: 0; }
  .ad-oversight--four .ad-oversight__item:nth-child(n + 3) { border-top: 4px double rgba(255, 255, 255, 0.35); }

  .ad-feature { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .ad-feature__collage { max-width: 640px; }

  .ad-contact { --form: 26rem; }
  .ad-contact__block { padding-right: calc(var(--form) + 5.5rem); padding-left: 2.5rem; }
}

@media (max-width: 880px) {
  .ad-plans { grid-template-columns: minmax(0, 1fr); margin: 0; }
  .ad-plan,
  .ad-plan:first-child { padding: 2.5rem 0; }
  .ad-plan + .ad-plan { border-left: 0; border-top: var(--double); }
  .ad-plan--featured,
  .ad-plan--featured:first-child {
    margin: 0 -1rem;
    padding: 4.5rem 1rem 2.5rem;
    border-top: 0;
  }
  .ad-plan--featured + .ad-plan { border-top: 0; }

  /* style.css drops the rail on phones; here it carries the heading, so
     only its controls go */
  .ad-faq .faq-section__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ad-faq .faq-rail { display: block; position: static; }
  .ad-faq .faq-toggle,
  .ad-faq .faq-rail__contact { display: none; }
  .theme-shadcn .faq__q { padding: 1.25rem 0; font-size: 1.0625rem; }
  .theme-shadcn .faq__a { padding: 0 0 1.25rem; }

  .ad-contact-section { padding: 3rem 0 5rem; }
  .ad-contact {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
  }
  .ad-contact__block {
    grid-row: 1;
    padding: 3rem 1.5rem 9rem;
  }
  .ad-contact__lines { width: 100%; height: 5rem; }
  .ad-contact__form {
    grid-column: 1;
    grid-row: 2;
    margin: -5rem 1rem 0;
  }
  .theme-shadcn .contact__card { padding: 1.5rem; }

  .ad-story,
  .ad-monitors { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; }
  .ad-story__signoff {
    position: static;
    max-width: 22rem;
    margin: 0;
  }

  .ad-oversight--two,
  .ad-oversight--four { grid-template-columns: minmax(0, 1fr); }
  .ad-oversight--four .ad-oversight__item,
  .ad-oversight--four .ad-oversight__item:nth-child(even) { padding: 2rem 0; }
  .ad-oversight--four .ad-oversight__item:nth-child(n + 2) { border-top: 4px double rgba(255, 255, 255, 0.35); }

  .ad-cols { grid-template-columns: minmax(0, 1fr); }
  .ad-cols__item,
  .ad-cols__item:first-child { padding: 2rem 0; }
  .ad-cols__item + .ad-cols__item { border-left: 0; border-top: var(--double); }

  .ad-posts { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .ad-intro { padding: 3rem 0 4rem; }
  .ad-intro__art { --rows: 9; }
  .ad-intro__lens { --d: 56px; }
  .theme-shadcn .form__row { grid-template-columns: minmax(0, 1fr); }
  .ad-posts { margin-top: 3.5rem; padding-top: 3.5rem; }
  .ad-shot { margin-right: 0.5rem; }
  .ad-shot--lines { margin-left: 0; }
  .ad-article__head { padding: 3rem 0 2.5rem; }
  .ad-article__hero { padding: 1rem; }
  .ad-next__link { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .ad-next { padding: 3.5rem 0 4.5rem; }
  .ad-next__inner { width: calc(100% - 2rem); }
}

@media (prefers-reduced-motion: reduce) {
  .ad-feature__media,
  .ad-shot__media { transition: none; }
  .ad-post:hover .ad-shot__media { transform: none; }
  .ad-feature:hover .ad-feature__media { transform: translateY(-50%); }
}