/* Design tokens. Every value comes from CLAUDE.md sections 5 and 6 and the Paper
   file "Website Redesign". Use these variables, never raw values, in components. */

:root {
  /* Surfaces */
  --color-black: #040407;          /* statement sections, header, cards */
  --color-charcoal: #161618;       /* working sections, footer, fields */
  --color-panel: #0a090f;          /* tab bars, file tiles */
  --color-raised: #1d1d20;         /* GEM request bubble, hovered menu option */
  --color-day: #232327;            /* available calendar day */
  --color-day-hover: #3a3a42;

  /* Text */
  --color-text: #f1f1f7;
  --color-text-strong: #ffffff;    /* labels on primary buttons */
  --color-text-muted: #a1a0a9;     /* subheads, field labels */
  --color-text-quiet: #8c8b94;     /* fine print, mono labels, copyright */
  --color-text-faint: #6e6d76;     /* unavailable days */
  --color-text-placeholder: #7f7e87; /* placeholders, 4.5:1 on the field fill */
  --color-text-panel: #d7d6de;     /* GEM panel answers and rows */

  /* Lines */
  --color-line: #2a2a2f;           /* field borders, sticky bar rule, dividers */
  --color-line-soft: #4f4f5680;    /* card borders at rest, footer rule */
  --color-line-faq: #222228;       /* accordion rows, tab row rule */
  --color-line-footer: #2c2c30;    /* mobile footer rows */
  --color-line-hover: #4a4a52;     /* hovered fields, cards, chips, slots */

  /* Action (interface only: things a person can click) */
  --color-action: #2a44b0;
  --color-action-hover: #3352c4;
  --color-action-pressed: #22398f;
  --color-link: #5770d9;           /* link underline and keyboard focus ring */
  --color-link-hover: #8296ee;     /* link underline on hover */

  /* Brand and status */
  --color-vault-red: #e72a52;
  --color-error: #e5484d;

  /* Model identity colors */
  --color-ion: #2ec4f1;
  --color-cube: #a4acb4;
  --color-pro: #c9a84c;

  /* GEM opal palette */
  --gem-1: #6ee8ec;
  --gem-2: #96a8ff;
  --gem-3: #cca0ff;
  --gem-4: #ffa0d4;
  --gem-5: #ffc4a6;
  --gem-6: #f8d684;
  --gem-cool-from: #96a8ff;        /* selected and active states */
  --gem-cool-to: #cca0ff;

  /* Page accent (industry slice). Industry pages override these two. */
  --accent-from: #96a8ff;
  --accent-to: #cca0ff;

  /* Type */
  --font-sans: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --font-mono-label: "JetBrains Mono", ui-monospace, monospace;

  /* Headlines scale smoothly: the phone size at 390px, the desktop size at 1280px and up,
     a little smaller below 390px, down to 320px. */
  --display-size: clamp(42px, min(48px + (100vw - 390px) * 6 / 70, 48px + (100vw - 390px) * 36 / 890), 84px);
  --display-line: clamp(46px, min(52px + (100vw - 390px) * 6 / 70, 52px + (100vw - 390px) * 36 / 890), 88px);
  --headline-size: clamp(32px, min(36px + (100vw - 390px) * 4 / 70, 36px + (100vw - 390px) * 16 / 890), 52px);
  --headline-line: clamp(37px, min(41px + (100vw - 390px) * 4 / 70, 41px + (100vw - 390px) * 19 / 890), 60px);
  --section-title-size: clamp(28px, min(32px + (100vw - 390px) * 4 / 70, 32px + (100vw - 390px) * 0 / 890), 32px);
  --section-title-line: clamp(34px, min(38px + (100vw - 390px) * 4 / 70, 38px + (100vw - 390px) * 2 / 890), 40px);
  --hero-title-size: clamp(28px, min(32px + (100vw - 390px) * 4 / 70, 32px + (100vw - 390px) * 20 / 890), 52px);
  --hero-title-line: clamp(33px, min(37px + (100vw - 390px) * 4 / 70, 37px + (100vw - 390px) * 23 / 890), 60px);
  --legal-title-size: clamp(34px, min(38px + (100vw - 390px) * 4 / 70, 38px + (100vw - 390px) * 10 / 890), 48px);
  --legal-title-line: clamp(40px, min(44px + (100vw - 390px) * 4 / 70, 44px + (100vw - 390px) * 12 / 890), 56px);

  /* Layout */
  --page-max: 1440px;
  --gutter: 64px;                  /* desktop content inset */
  --content: 1312px;
  --section-pad: 76px;             /* half of the 152px gap between sections */
  --link-gap: 36px;                /* a section-ending link, under what it belongs to */
  --link-edge: 96px;               /* that link to the next band's edge, or next headline on the same band */
  --header-h: 80px;
  --radius-button: 8px;
  --radius-field: 10px;
  --radius-choice: 12px;
  --radius-card: 18px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --menu-open: 340ms;              /* header flyouts (approved menu prototype) */
  --menu-close: 260ms;
  --ease-menu-open: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-menu-close: cubic-bezier(0.4, 0, 0.6, 1);
}

@media (max-width: 1023px) {
  :root {
    --header-h: 56px;
  }
}

@media (max-width: 767px) {
  :root {
    --gutter: 32px;
    --section-pad: 48px;           /* half of the 96px mobile gap */
    --link-gap: 20px;
    --link-edge: 48px;
    --radius-card: 18px;
  }
}

/* Industry slices (CLAUDE.md section 5) */
.accent-healthcare { --accent-from: #86c2f7; --accent-to: #9ba7ff; }
.accent-education { --accent-from: #96a8ff; --accent-to: #cca0ff; }
.accent-finance { --accent-from: #6ee8ec; --accent-to: #86d4f2; }
.accent-legal { --accent-from: #cca0ff; --accent-to: #ffa0d4; }
.accent-government { --accent-from: #e9e3ff; --accent-to: #c9c1ff; }
/* Fonts, page defaults, the type scale, sections and keyboard focus. */

@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Geist Mono downloads only on pages that show text set in it. */
@font-face {
  font-family: "Geist Mono";
  src: url("/assets/fonts/geist-mono-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Latin subset of JetBrains Mono (alt zero), same characters as the Geist files. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  /* iOS Safari flashes a gray box over anything tapped. */
  -webkit-tap-highlight-color: transparent;
}

:root {
  color-scheme: dark;
}

html {
  background: var(--color-black);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
  margin: 0;
}

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

img,
svg,
canvas,
picture {
  display: block;
  max-width: 100%;
}

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

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

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

::selection {
  background: rgb(87 112 217 / 45%);
  color: var(--color-text-strong);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 8px 12px;
  border-radius: var(--radius-button);
  background: var(--color-action);
  color: var(--color-text-strong);
  font-size: 14px;
  line-height: 20px;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

/* Keyboard focus: a 2px ring 3px outside every link and button, following its
   corners, only when the keyboard is in use (CLAUDE.md, Interaction states). */
:focus-visible {
  outline: 2px solid var(--color-link);
  outline-offset: 3px;
}

:focus:not(:focus-visible),
.js:not(.keyboard-nav) :focus-visible {
  outline: none;
}

/* Type scale (CLAUDE.md section 6). */
/* Never one long line across the page: anything longer than this wraps. */
.t-display {
  max-width: 13em;
  margin-inline: auto;
  font-size: var(--display-size);
  line-height: var(--display-line);
  font-weight: 650;
  letter-spacing: -0.025em;
}

.t-headline {
  font-size: var(--headline-size);
  line-height: var(--headline-line);
  font-weight: 650;
  letter-spacing: -0.015em;
}

.t-section-title {
  font-size: var(--section-title-size);
  line-height: var(--section-title-line);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.t-subhead-statement {
  max-width: 880px;
  font-size: 24px;
  line-height: 32px;
  color: var(--color-text-muted);
}

.t-subhead {
  font-size: 20px;
  line-height: 28px;
  color: var(--color-text-muted);
}

.t-body {
  font-size: 16px;
  line-height: 26px;
}

.t-body-large {
  font-size: 18px;
  line-height: 28px;
}

.t-small {
  font-size: 14px;
  line-height: 20px;
}

.t-fine {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text-quiet);
}

.t-mono-label {
  font-family: var(--font-mono-label);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-quiet);
}

.t-muted {
  color: var(--color-text-muted);
}

/* No forced line breaks anywhere: text wraps on its own at every width. Headlines and the
   lines that belong to them balance, so they never end on a stray word; body text is pretty. */
h1,
h2,
h3,
.t-display,
.t-headline,
.t-section-title,
.t-subhead,
.t-subhead-statement,
.small-head__sub,
.closing__sub,
.home-hero__sub,
.ind-hero__sub,
.ind-gem__sub,
.order__sub,
.carousel__title,
.faq__question-text {
  text-wrap: balance;
}

p,
li,
dd,
blockquote {
  text-wrap: pretty;
}

/* Browsers without "pretty" (Firefox, Safari before 26) would leave a stray last word on
   these short lines. */
@supports not (text-wrap: pretty) {
  .legal__subtitle,
  .qs-copy p {
    text-wrap: balance;
  }
}

/* Shorter wording for phones: one of each pair shows. Never a line break. */
.show-phone {
  display: none;
}

@media (max-width: 767px) {
  .show-phone {
    display: inline;
  }

  .show-wide {
    display: none;
  }
}

@media (max-width: 767px) {

  .t-subhead-statement {
    font-size: 18px;
    line-height: 26px;
  }

  .t-subhead {
    font-size: 17px;
    line-height: 24px;
  }
}

/* Sections. Statement sections are black and centered; working sections are
   charcoal and left aligned. Each splits the 152px (96px mobile) gap evenly. */
.section {
  padding: var(--section-pad) var(--gutter);
}

.section--statement {
  background: var(--color-black);
  text-align: center;
}

.section--working {
  background: var(--color-charcoal);
}

.section__inner {
  max-width: var(--content);
  margin-inline: auto;
}

.section--statement .section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Section cascade (_includes/scripts/reveal.js). The script sets the class on <html>, so without it
   everything simply shows. Uses translate so a piece's own transform is left alone. */
@media screen and (prefers-reduced-motion: no-preference) {
  .cascade-ready .cascade-hidden {
    opacity: 0;
    translate: 0 30px;
    transition: none;
  }

  .cascade-ready .cascade-play {
    transition:
      opacity 900ms cubic-bezier(0.455, 0.03, 0.515, 0.955) var(--cascade-delay, 0ms),
      translate 700ms cubic-bezier(0.455, 0.03, 0.515, 0.955) var(--cascade-delay, 0ms);
  }
}

/* Statement headline reveal (_includes/scripts/reveal.js). The script sets the class on
   <html>, so without it the headline simply shows. */
@media screen and (prefers-reduced-motion: no-preference) {
  .headline-reveal .headline-reveal__item {
    opacity: 0;
    transform: translateY(10px);
  }

  .headline-reveal .headline-reveal__item.is-revealed {
    opacity: 1;
    transform: none;
    transition: opacity 500ms linear, transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
}

.section--statement .t-display {
  margin-top: 24px;
}

.section--statement .t-display + .t-subhead-statement {
  margin-top: 32px;
}

.section--working .section__head {
  max-width: 720px;
}

.section--working .t-headline + .t-subhead {
  margin-top: 20px;
}

/* Between the phone and desktop layouts a headline uses the full content width. */
@media (min-width: 600px) and (max-width: 1279px) {
  .section--working .section__head,
  .home-industries .section__head {
    max-width: none;
  }

  .section--working .section__head > .t-subhead {
    max-width: 720px;
  }
}

@media (max-width: 767px) {
  .section--statement .t-display + .t-subhead-statement {
    margin-top: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
/* Buttons and links (CLAUDE.md sections 5 and 7, "Reference · Order form states",
   "Reference · Interaction states"). The action blue only ever means "click this". */

/* Order: the only call-to-action button. 36px tall with 20px side padding on
   desktop, 16px on phones, with a 44px tap area there. Same look everywhere it
   appears (CLAUDE.md, "Filled button size"). */
.btn-order,
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius-button);
  background: var(--color-action);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 150ms ease, opacity 150ms ease;
}

.btn-order {
  height: 36px;
  padding-inline: 20px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
}

/* Primary form actions (Next, Send, Confirm): 44px, sized to their label. */
.btn-primary {
  height: 44px;
  padding-inline: 20px;
  font-size: 16px;
  line-height: 22px;
  color: var(--color-text-strong);
}

@media (hover: hover) {
  .btn-order:hover,
  .btn-primary:hover {
    background: var(--color-action-hover);
  }
}

.btn-order:active,
.btn-primary:active {
  background: var(--color-action-pressed);
}

/* In progress: same size, 60% opacity, can't be clicked twice. */
.btn-order[aria-busy="true"],
.btn-primary[aria-busy="true"],
.btn-order[aria-disabled="true"],
.btn-primary[aria-disabled="true"] {
  opacity: 0.6;
  pointer-events: none;
  cursor: default;
}

@media (max-width: 767px) {
  .btn-order {
    padding-inline: 16px;
  }

  /* 44px tap area around the 36px button. */
  .btn-order::after {
    content: "";
    position: absolute;
    inset: -4px 0;
  }

  /* Form buttons stay sized to their label: 36px, with a 44px tap area. */
  .btn-primary {
    height: 36px;
    font-size: 14px;
    line-height: 20px;
  }

  .btn-primary::after {
    content: "";
    position: absolute;
    inset: -4px 0;
  }
}

/* Text link: white text with the 2px action-blue underline. Every underlined link
   is only the text: never a chevron or an arrow (CLAUDE.md section 7). */
.link {
  color: var(--color-text);
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--color-link);
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
  transition: text-decoration-color 120ms ease;
}

/* Hover: the underline brightens, the text stays (CLAUDE.md section 5). */
@media (hover: hover) {
  .link:hover {
    text-decoration-color: var(--color-link-hover);
  }
}

.link--loose {
  text-underline-offset: 6px;
}

/* Gray link: quiet navigation such as "Back". */
.link-gray {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-muted);
  font-size: 15px;
  line-height: 22px;
  transition: color 150ms ease;
}

@media (hover: hover) {
  .link-gray:hover {
    color: var(--color-text);
  }
}

/* Plain link: white text with no underline (footer and menu links). */
.link-plain {
  color: var(--color-text);
  transition: color 150ms ease;
}

@media (hover: hover) {
  .link-plain:hover {
    color: var(--color-text-strong);
  }
}

/* Order paired with its link: 28px apart, vertically centered. */
.cta-pair {
  display: flex;
  align-items: center;
  gap: 28px;
}

.cta-pair--tight {
  gap: 20px;
}

@media (max-width: 767px) {
  .cta-pair {
    gap: 24px;
  }

  .cta-pair--tight {
    gap: 20px;
  }
}

/* Small model color square beside a model name. */
.swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: var(--swatch, var(--color-cube));
}

.swatch--sm {
  width: 12px;
  height: 12px;
}

.menu-icon {
  display: block;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
}

.swatch--xs {
  width: 10px;
  height: 10px;
}
/* Site header (CLAUDE.md section 7 and "Header flyouts", references "Header on scroll",
   "Reference · Products flyout", "Reference · Industries flyout", "Reference · Mobile menu";
   motion from "Motion prototypes/header-dropdowns.html" and "header-menu-mobile.html"). */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  color: var(--color-text);
}

.site-header[data-sticky="false"] {
  position: relative;
}

/* The still picture on the parts page sits inside its own frame. */
.site-header--static {
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
}

/* Over a full-bleed hero image: transparent, laid over the hero, solid on scroll. */
.site-header[data-variant="overlay"] {
  margin-bottom: calc(-1 * var(--header-h));
}

.site-header__bar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  padding-inline: 48px;
  background: var(--color-black);
  transition: background-color 200ms ease;
}

.site-header[data-variant="overlay"]:not(.is-scrolled, .is-open) .site-header__bar {
  background: transparent;
}

.site-header__logo {
  display: block;
  flex-shrink: 0;
  border-radius: 4px;
}

.site-header__logo img {
  width: 132px;
  height: 31px;
  object-fit: contain;
}

.site-header__nav {
  position: absolute;
  top: 20px;
  left: 232px;
}

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

.site-header__item {
  position: relative;
  z-index: 1;
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-button);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
  white-space: nowrap;
}

/* The soft box behind the hovered word slides between words (220ms). */
.site-header__highlight {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 40px;
  border-radius: var(--radius-button);
  background: rgb(241 241 247 / 9%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 220ms var(--ease-out), width 220ms var(--ease-out);
}

.site-header__highlight.is-on {
  opacity: 1;
}

.site-header__highlight.is-instant {
  transition: opacity 150ms ease;
}

.site-header__icons {
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-header__questions {
  display: block;
  border-radius: 50%;
}

.site-header__questions svg {
  width: 26px;
  height: 26px;
}

.icon-stroke {
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-header__toggle {
  display: none;
  position: relative;
  width: 18px;
  height: 22px;
}

/* 48px tap area around the menu icon. */
.site-header__toggle::before {
  content: "";
  position: absolute;
  inset: -13px -15px;
}

.site-header__toggle i {
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  border-radius: 1px;
  background: currentcolor;
  transition: top 220ms var(--ease-out), transform 220ms var(--ease-out), width 220ms, left 220ms;
}

.site-header__toggle i:first-child {
  top: 7.25px;
}

.site-header__toggle i:last-child {
  top: 14.25px;
}

.site-header__toggle[aria-expanded="true"] i {
  top: 11px;
  left: -1px;
  width: 20px;
}

.site-header__toggle[aria-expanded="true"] i:first-child {
  transform: rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] i:last-child {
  transform: rotate(-45deg);
}

/* Flyout panel: full width under the header, the same black as the header with no
   rule, so the two read as one piece. It grows down in height (340ms) and shrinks
   back up (260ms). The contents fade in and rise 8px, 70ms after the panel starts,
   and fade out in 140ms. Switching menus while open: the height changes smoothly
   and the contents crossfade, with no new drop. Values copied from the approved
   "Motion prototypes/header-dropdowns.html" (specs/menu/vault-menu-motion.html). */
.flyout {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  z-index: 1;
  height: 0;
  overflow: hidden;
  background: var(--color-black);
  transition: height var(--menu-close) var(--ease-menu-close);
}

.site-header.is-open .flyout {
  transition: height var(--menu-open) var(--ease-menu-open);
}

/* Positioned from the nav (x 232, y 20): the list starts 44px under the header,
   its left edge on the first menu word (x 244). The contents sit outside the
   panel in the page, so they are clipped to the panel's growing height
   (--flyout-h, set by the script) to be revealed inside it, as in the prototype. */
.flyout__group {
  position: absolute;
  top: 104px;
  left: 12px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 64px;
  clip-path: inset(-12px -48px calc(100% + 44px - var(--flyout-h, 0px)) -48px);
  opacity: 0;
  transform: translateY(-8px);
  visibility: hidden;
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    visibility 0s linear 140ms,
    clip-path var(--menu-close) var(--ease-menu-close);
}

.flyout__group.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition:
    opacity 260ms ease 70ms,
    transform 300ms var(--ease-menu-open) 70ms,
    visibility 0s,
    clip-path var(--menu-open) var(--ease-menu-open);
}

.flyout__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.flyout__link {
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 4px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: #c7c7cd;
  transition: color 120ms ease;
}

@media (hover: hover) {
  .flyout__link:hover {
    color: var(--color-text-strong);
  }
}

/* Starts 8px lower so its first baseline sits on the first item's baseline. */
.flyout__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-top: 8px;
  font-size: 15px;
  line-height: 22px;
  white-space: nowrap;
}

/* The page behind dims and blurs with the panel: in over 250ms, out over 150ms. */
.site-dim {
  position: fixed;
  inset: 80px 0 0;
  z-index: 40;
  background: rgb(4 4 7 / 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--menu-close) var(--ease-menu-close);
}

.flyout-open .site-dim {
  opacity: 1;
  transition: opacity var(--menu-open) var(--ease-menu-open);
}

.page {
  transition: filter var(--menu-close) var(--ease-menu-close);
}

.flyout-open .page {
  filter: blur(10px);
  transition: filter var(--menu-open) var(--ease-menu-open);
}

/* Mobile menu: full screen under the 56px header. */
.mobile-menu {
  display: none;
}

@media (max-width: 1279px) {
  .site-header__item {
    font-size: 15px;
  }
}

@media (max-width: 1023px) {
  .site-header__bar {
    height: 56px;
    padding-inline: 24px;
  }

  .site-header__logo img {
    width: 96px;
    height: 22px;
  }

  .site-header__nav,
  .flyout,
  .site-dim {
    display: none;
  }

  .site-header__questions {
    display: none;
  }

  .site-header__toggle {
    display: block;
  }

  .mobile-menu {
    position: fixed;
    inset: 56px 0 0;
    z-index: 1;
    display: block;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 32px 48px;
    background: var(--color-black);
    clip-path: inset(0 0 100% 0);
    visibility: hidden;
    transition: clip-path var(--menu-close) var(--ease-menu-close), visibility 0s linear var(--menu-close);
  }

  .mobile-menu.is-open {
    clip-path: inset(0);
    visibility: visible;
    transition: clip-path var(--menu-open) var(--ease-menu-open), visibility 0s;
  }

  /* Moves exactly like the desktop flyout: the panel reveals, its contents move as one group. */
  .mobile-menu__row,
  .mobile-menu__help {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 140ms ease, transform 140ms ease;
  }

  .mobile-menu.is-open .mobile-menu__row,
  .mobile-menu.is-open .mobile-menu__help {
    opacity: 1;
    transform: none;
    transition: opacity 260ms ease 70ms, transform 300ms var(--ease-menu-open) 70ms;
  }

  .menu-open {
    overflow: hidden;
  }
}

.mobile-menu__row {
  border-bottom: 1px solid var(--color-line);
}

/* The help icon, 28px under the last rule and on its right end, in a 44px tap area. */
.mobile-menu__help {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 17px -11px 0 auto;
}

.mobile-menu__help svg {
  width: 22px;
  height: 22px;
}

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 60px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  text-align: left;
}

.mobile-menu__chevron {
  width: 16px;
  height: 16px;
  transition: transform 250ms var(--ease-out);
}

.mobile-menu__head[aria-expanded="true"] .mobile-menu__chevron {
  transform: rotate(180deg);
}

/* The open group slides down as one piece. */
.mobile-menu__sub {
  height: 0;
  overflow: hidden;
  transition: height 250ms ease;
}

.mobile-menu__sub-inner {
  padding-bottom: 16px;
}

.mobile-menu__sub-link {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  white-space: nowrap;
}

/* Compare models and Get in touch: secondary, so they don't read as menu items. */
.mobile-menu__secondary {
  margin-top: 16px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
  /* No transitions at all, including the contents' 70ms delay. */
  .flyout,
  .site-header.is-open .flyout,
  .flyout__group,
  .flyout__group.is-open,
  .site-dim,
  .page,
  .mobile-menu,
  .mobile-menu.is-open,
  .mobile-menu__row,
  .mobile-menu.is-open .mobile-menu__row,
  .mobile-menu__help,
  .mobile-menu.is-open .mobile-menu__help {
    transition: none !important;
  }
}
/* Footer (Paper: every page's footer, "Mobile footer · Products open"; CLAUDE.md
   section 7 trademark line and section 12 Legal column order). */

.site-footer {
  padding: 76px var(--gutter) 40px;
  background: var(--color-charcoal);
}

.site-footer__inner {
  max-width: var(--content);
  margin-inline: auto;
}

.site-footer__top {
  display: flex;
  align-items: flex-start;
  gap: 48px;
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 224px;
  flex-shrink: 0;
}

.site-footer__logo {
  display: block;
  align-self: flex-start;
  border-radius: 4px;
}

.site-footer__logo img {
  width: 132px;
  height: 31px;
  object-fit: contain;
  object-position: left center;
}

.site-footer__tagline {
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Equal columns from the left; any space left over sits after the last one. */
.site-footer__columns {
  display: flex;
  flex-grow: 1;
  gap: 24px;
}

.site-footer__column {
  display: flex;
  flex-direction: column;
  flex: 0 1 160px;
  gap: 14px;
  min-width: 0;
}

.site-footer__label {
  padding-bottom: 6px;
  font-family: var(--font-mono-label);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-quiet);
}

.site-footer__toggle {
  display: none;
}

.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.site-footer__links a {
  display: block;
  width: fit-content;
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  border-radius: 3px;
  color: #c7c7cd;
  transition: color 120ms ease;
}

@media (hover: hover) {
  .site-footer__links a:hover {
    color: var(--color-text-strong);
  }
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line-soft);
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text-quiet);
}

.site-footer__trademark {
  white-space: nowrap;
}

@media (max-width: 1279px) {
  .site-footer__top {
    flex-direction: column;
  }

  .site-footer__brand {
    width: 400px;
  }

  .site-footer__columns {
    align-self: stretch;
  }
}

/* Too narrow for 160px columns: as wide as their text, the same space between them. */
@media (max-width: 1023px) {
  .site-footer__columns {
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px 32px;
  }

  .site-footer__column {
    flex: none;
  }
}

@media (max-width: 767px) {
  .site-footer {
    padding: 48px 32px;
  }

  .site-footer__top {
    gap: 48px;
  }

  .site-footer__brand {
    width: auto;
    gap: 20px;
  }

  .site-footer__logo img {
    width: 96px;
    height: 22px;
  }

  .site-footer__tagline {
    font-size: 18px;
    line-height: 24px;
  }

  .site-footer__columns {
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--color-line-footer);
  }

  .site-footer__column {
    width: auto;
    gap: 0;
    border-bottom: 1px solid var(--color-line-footer);
  }

  .site-footer__column > .site-footer__label {
    display: none;
  }

  .site-footer__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 55px; /* 56 with the row's rule, as in Paper */
  }

  .site-footer__toggle .site-footer__label {
    padding-bottom: 0;
  }

  .site-footer__toggle svg {
    width: 12px;
    height: 12px;
    transition: transform 250ms var(--ease-out);
  }

  .site-footer__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
  }

  .site-footer__panel {
    height: 0;
    overflow: hidden;
    transition: height 260ms var(--ease-out);
  }

  .no-js .site-footer__panel {
    height: auto;
  }

  .site-footer__links {
    padding-bottom: 24px;
  }

  .site-footer__links a {
    font-size: 15px;
    line-height: 22px;
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-top: 0;
    padding-top: 28px;
    border-top: 0;
  }

  .site-footer__trademark {
    max-width: 326px;
    white-space: normal;
  }
}

/* Rows only fold on phones; wider screens always show every link. */
@media (min-width: 768px) {
  .site-footer__panel {
    height: auto !important;
  }
}
/* Form fields and every state from "Reference · Order form states" and
   "Reference · Interaction states" (CLAUDE.md, Order flow input system). */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-group + .form-group {
  margin-top: 48px;
}

.form-row {
  display: flex;
  gap: 16px;
}

.form-row > .field {
  flex: 1 1 0;
  min-width: 0;
}

.form-stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field__label {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-muted);
}

.field__optional {
  font-size: 13px;
  color: var(--color-text-quiet);
}

.input,
.select__button {
  display: flex;
  align-items: center;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-field);
  background: var(--color-charcoal);
  font-size: 16px;
  line-height: 22px;
  color: var(--color-text);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

/* A browser-autofilled field keeps the normal look. Browsers tint these fields with
   rules a page can't override directly, so the fill is painted over the tint with an
   inset shadow and the text color is forced. Firefox dims them with a filter. */
.input:is(:autofill, :-webkit-autofill) {
  box-shadow: inset 0 0 0 1000px var(--color-charcoal);
  filter: none;
  caret-color: var(--color-text);
  -webkit-text-fill-color: var(--color-text);
}

.input:is(:autofill, :-webkit-autofill):focus {
  box-shadow: inset 0 0 0 1000px var(--color-charcoal), 0 0 0 3px rgb(87 112 217 / 25%);
}

.field.has-error .input:is(:autofill, :-webkit-autofill):focus {
  box-shadow: inset 0 0 0 1000px var(--color-charcoal), 0 0 0 3px rgb(229 72 77 / 25%);
}

textarea.input {
  height: 140px;
  padding: 15px 16px;
  resize: vertical;
}

.input::placeholder {
  color: var(--color-text-placeholder);
  opacity: 1;
}

@media (hover: hover) {
  .input:hover,
  .select__button:hover {
    border-color: var(--color-line-hover);
  }
}

/* Fields show their own focus: the border always, the soft ring only for keyboard use. */
.input:focus,
.select__button:focus,
.select__button[aria-expanded="true"] {
  outline: none;
  border-color: var(--color-link);
  box-shadow: 0 0 0 3px rgb(87 112 217 / 25%);
}

.field.has-error .input,
.field.has-error .select__button {
  border-color: var(--color-error);
}

.field.has-error .input:focus,
.field.has-error .select__button:focus {
  box-shadow: 0 0 0 3px rgb(229 72 77 / 25%);
}

.js:not(.keyboard-nav) :is(.input:focus, .select__button:focus, .select__button[aria-expanded="true"], .search:focus-within) {
  box-shadow: none;
}

.field__error,
.choice-error {
  font-size: 13px;
  line-height: 18px;
  color: var(--color-error);
}

.field__error[hidden],
.choice-error[hidden] {
  display: none;
}

/* Select: our own button and menu so the open list matches the design. */
.select {
  position: relative;
}

.select__button {
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
}

.select__value.is-placeholder {
  color: var(--color-text-placeholder);
}

.select__chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  margin-left: 12px;
}

.select__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  padding: 6px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-field);
  background: var(--color-charcoal);
  box-shadow: 0 12px 32px rgb(0 0 0 / 50%);
}

.select__menu[hidden] {
  display: none;
}

.select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 15px;
  line-height: 20px;
  cursor: pointer;
}

.select__option.is-active {
  background: var(--color-raised);
}

.select__check {
  width: 14px;
  height: 14px;
  visibility: hidden;
}

.select__option[aria-selected="true"] .select__check {
  visibility: visible;
}

/* Selection cards and chips: radio buttons drawn as tiles. */
.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.choices--chips {
  display: flex;
  gap: 16px;
}

.choice {
  position: relative;
  display: block;
  cursor: pointer;
}

.choices--chips .choice {
  flex: 1 1 0;
}

.choice__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice__box {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  height: 88px;
  padding: 0 20px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-choice);
  background: var(--color-charcoal);
  transition: border-color 150ms ease;
}

.choice--chip .choice__box {
  align-items: center;
  height: 48px;
  padding: 0 12px;
}

/* The title row stops 40px from the card's right edge (12px in, the 16px circle,
   12px of air), so the title can never run under the check. With the card's
   20px padding that leaves 20px on the row ("Reference · Order form states"). */
.choices:not(.choices--chips) .choice__title {
  padding-right: 20px;
}

.choice__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
}

.choice--chip .choice__title {
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
}

.choice__detail {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-muted);
}

.choice__check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 16px;
  height: 16px;
  opacity: 0;
  transition: opacity 150ms ease;
}

@media (hover: hover) {
  .choice:hover .choice__box {
    border-color: var(--color-line-hover);
  }
}

/* Selected: a 1.5px white border, drawn inside so the label never moves. */
.choice__input:checked + .choice__box {
  border-color: var(--color-text);
  box-shadow: inset 0 0 0 0.5px var(--color-text);
}

/* Help me choose takes the GEM outline, drawn over the tile so nothing changes size. */
.choice__input[value="help"]:checked + .choice__box {
  border-color: transparent;
  box-shadow: none;
}

.choice__input[value="help"]:checked + .choice__box::after {
  content: "";
  position: absolute;
  inset: -1px;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gem-cool-from), var(--gem-cool-to));
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
}

/* A model tile takes its color, as on the lineup cards. */
.choice--model .choice__input:checked + .choice__box {
  border-color: var(--choice-color);
  box-shadow: inset 0 0 0 0.5px var(--choice-color);
}

.choice__input:checked + .choice__box .choice__check {
  opacity: 1;
}

.choice__input:focus-visible + .choice__box {
  outline: 2px solid var(--color-link);
  outline-offset: 3px;
}

.js:not(.keyboard-nav) .choice__input:focus-visible + .choice__box {
  outline: none;
}

/* Calendar days and time slots (Order, Schedule page). */
.day {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-day);
  transition: background-color 150ms ease;
}

.day:disabled {
  background: none;
  font-weight: 400;
  color: var(--color-text-faint);
  cursor: default;
}

@media (hover: hover) {
  .day:not(:disabled, [aria-pressed="true"]):hover {
    background: var(--color-day-hover);
    color: var(--color-text-strong);
  }
}

.day[aria-pressed="true"] {
  background: var(--color-text);
  font-weight: 600;
  color: var(--color-black);
}

.slot {
  display: grid;
  place-items: center;
  width: 200px;
  height: 44px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-button);
  background: var(--color-charcoal);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  transition: border-color 150ms ease;
}

@media (hover: hover) {
  .slot:not([aria-pressed="true"]):hover {
    border-color: var(--color-line-hover);
  }
}

.slot[aria-pressed="true"] {
  border-color: var(--color-text);
  box-shadow: inset 0 0 0 0.5px var(--color-text);
}

/* Search field (Questions page). */
.search {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 20px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-choice);
  background: var(--color-charcoal);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.search svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-text-quiet);
}

.search input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 16px;
  line-height: 22px;
}

.search input::placeholder {
  color: var(--color-text-placeholder);
}

.search input:focus {
  outline: none;
}

/* Paper's field has no clear button: deleting the words or pressing Escape clears it. */
.search input::-webkit-search-cancel-button {
  appearance: none;
}

.search:focus-within {
  border-color: var(--color-link);
  box-shadow: 0 0 0 3px rgb(87 112 217 / 25%);
}

/* Search with no results (Reference · Interaction states, panel 3). */
.search-empty {
  margin-top: 40px;
}

.search-empty[hidden] {
  display: none;
}

.search-empty__title {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.search-empty__line {
  margin-top: 8px;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .search {
    gap: 10px;
    height: 52px;
    padding: 0 16px;
    border-radius: 10px;
  }
}

/* Submit row: fine print left, button right. */
.submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 40px;
}

.submit-row__note {
  font-size: 13px;
  line-height: 20px;
  color: var(--color-text-quiet);
}

.submit-row__note .link {
  margin-left: 4px;
}

/* A failed send or booking: one red line above the submit row. */
.form-alert {
  margin-top: 40px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-error);
}

.form-alert[hidden] {
  display: none;
}

.form-alert:not([hidden]) + .submit-row {
  margin-top: 16px;
}

@media (max-width: 767px) {
  .form-group + .form-group {
    margin-top: 40px;
  }

  .form-row {
    flex-direction: column;
    gap: 20px;
  }

  .form-stack {
    gap: 20px;
  }

  /* The tiles stack full width, with each name on one line beside its square. */
  .choices {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .choices:not(.choices--chips) .choice__box {
    height: auto;
    padding: 16px 18px;
  }

  .choices:not(.choices--chips) .choice__title {
    padding-right: 26px;
    font-size: 16px;
  }

  .choices:not(.choices--chips) .choice__title .swatch {
    width: 12px;
    height: 12px;
  }

  /* Under the name, at the name's left edge: the 12px square and its 10px gap. */
  .choice--model .choice__detail {
    padding-left: 22px;
  }

  /* Centered on the name row. */
  .choices:not(.choices--chips) .choice__check {
    top: 19px;
    right: 18px;
  }

  .choices--chips {
    gap: 10px;
  }

  .choice--chip .choice__title {
    font-size: 14px;
  }

  /* On mobile the chip's check sits on its corner so it never covers the label. */
  .choice--chip .choice__check {
    top: -6px;
    right: -6px;
  }

  .choice--chip .choice__box {
    padding-inline: 4px;
  }

  .choice--chip .choice__title {
    white-space: nowrap;
  }

  .submit-row {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 14px;
    margin-top: 32px;
  }
}

.choice-group {
  position: relative;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.choice-group legend {
  margin-bottom: 12px;
  padding: 0;
}

.choice-group legend.field__label {
  margin-bottom: 8px;
}

.choices + .choice-error {
  margin-top: 8px;
}

.choice-group__compare {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 24px;
  font-size: 15px;
  line-height: 22px;
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .choice-group__compare {
    padding-bottom: 2px;
  }
}

/* The comparison in a sheet over the waitlist form. */
.compare-sheet {
  position: fixed;
  inset: 48px 0 0;
  width: 100%;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 16px 16px 0 0;
  background: var(--color-black);
  color: var(--color-text);
}

/* Under the full header, so the dimmed header shows whole above it. */
@media (min-width: 1024px) {
  .compare-sheet {
    inset: 80px 0 0;
  }
}

.compare-sheet[open] {
  display: flex;
  flex-direction: column;
  animation: compare-sheet-in 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.compare-sheet::backdrop {
  background: rgb(4 4 7 / 55%);
}

@keyframes compare-sheet-in {
  from {
    transform: translateY(100%);
  }
}

.compare-sheet__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 calc(var(--gutter) - 20px) 0 var(--gutter);
  border-bottom: 1px solid var(--color-line);
}

.compare-sheet__title {
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
}

/* Focus lands here when the sheet opens, with no ring. The X's ring is for Tab alone. */
.compare-sheet__title:focus {
  outline: none;
}

.compare-sheet__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}

.compare-sheet__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.compare-sheet .compare-hero {
  padding-top: 24px;
}

.compare-sheet .compare-hero .compare-heads {
  margin-top: 0;
}

/* The model row pins right under the header once the columns scroll away. It takes no room in
   the sheet, and slides out from under the header. */
.compare-sheet__pin {
  position: sticky;
  top: 0;
  z-index: 2;
  display: block;
  height: 0;
}

.compare-sheet__pin .sticky-bar {
  position: absolute;
  z-index: auto;
}

@media (max-width: 767px) {
  .compare-sheet__pin .sticky-bar__models {
    height: 63px; /* 64 with the rule */
  }
}

@media (prefers-reduced-motion: reduce) {
  .compare-sheet[open] {
    animation: none;
  }
}
/* Repeated blocks: FAQ accordion, tabs, carousels, the "Have another question?"
   line. Values from the Legal, Healthcare, Questions and Alpha Cube artboards. */

/* FAQ accordion: 800 wide, rows with a top rule, never snapping open (250ms). */
.faq {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  text-align: left;
}

.faq__item {
  border-top: 1px solid var(--color-line-faq);
}

.faq__item:last-child {
  border-bottom: 1px solid var(--color-line-faq);
}

.faq--ruled-bottom .faq__item {
  border-top: 0;
  border-bottom: 1px solid var(--color-line-faq);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 30px 0;
  text-align: left;
  font-size: 24px;
  line-height: 31px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #dcdce2;
  transition: padding-bottom 250ms ease, color 120ms ease;
}

@media (hover: hover) {
  .faq__question:hover {
    color: #fff;
  }

  .faq__question:hover .faq__icon {
    filter: brightness(1.3);
  }
}

/* The bottom padding eases away with the same timing as the answer's height, so the
   row's total height never jumps. */
.faq__question[aria-expanded="true"] {
  padding-bottom: 0;
}

.faq__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  overflow: visible;
  transition: filter 150ms ease;
}

.faq__icon path {
  fill: none;
  stroke: var(--faq-stroke, url("#faq-accent"));
  stroke-width: 1.75;
  stroke-linecap: round;
}

/* The vertical stroke turns 90 degrees and fades to leave the minus. */
.faq__icon .faq__icon-v {
  transform-origin: 14px 14px;
  transition: transform 250ms ease, opacity 250ms ease;
}

.faq__question[aria-expanded="true"] .faq__icon-v {
  transform: rotate(90deg);
  opacity: 0;
}

/* Neutral icons (Questions page): never red, white on hover and on the open row. */
.faq--neutral .faq__icon path,
.is-searching .faq__icon path {
  stroke: var(--color-text-quiet);
  transition: stroke 150ms ease, transform 250ms ease, opacity 250ms ease;
}

.faq--neutral .faq__question[aria-expanded="true"] .faq__icon path,
.is-searching .faq__question[aria-expanded="true"] .faq__icon path {
  stroke: var(--color-text);
}

@media (hover: hover) {
  .faq--neutral .faq__question:hover .faq__icon,
  .is-searching .faq__question:hover .faq__icon {
    filter: none;
  }

  .faq--neutral .faq__question:hover .faq__icon path,
  .is-searching .faq__question:hover .faq__icon path {
    stroke: var(--color-text);
  }
}

.faq__answer {
  overflow: hidden;
  overflow-anchor: none;
  transition: height 250ms ease;
}

.faq__answer-inner {
  max-width: 780px;
  padding: 21px 0 32px;
  font-size: 18px;
  line-height: 28px;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity 250ms ease;
}

.faq__answer.is-open .faq__answer-inner {
  opacity: 1;
}

.faq__answer-inner .link {
  color: var(--color-text);
}

.faq__answer-inner .faq__link--own-line {
  display: block;
  width: fit-content;
}

.faq__topic {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono-label);
  font-size: 11px;
  line-height: 14px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-quiet);
}

.faq__question-text {
  flex: 1;
}

/* "Have another question? Get in touch", 32px under the last row. */
.contact-line {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 32px;
  font-size: 18px;
  line-height: 28px;
  color: var(--color-text-muted);
}

.contact-line--left {
  justify-content: flex-start;
}

@media (max-width: 767px) {
  .faq {
    max-width: 326px;
  }

  .faq__question {
    gap: 16px;
    padding: 22px 0;
    font-size: 18px;
    line-height: 24px;
  }

  .faq__icon {
    width: 24px;
    height: 24px;
  }

  .faq__answer-inner {
    padding: 8px 0 24px;
    font-size: 15px;
    line-height: 22px;
  }

  .contact-line {
    font-size: 15px;
    line-height: 22px;
  }
}

/* Segmented tabs (industry GEM demos): the active tab takes the page accent. */
.tabs {
  position: relative;
}

.tabs__list {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-choice);
  background: var(--color-panel);
}

.tabs__tab {
  position: relative;
  flex-shrink: 0;
  padding: 9px 18px;
  border-radius: 9px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: #a0a0a8;
  white-space: nowrap;
  transition: color 300ms;
}

@media (hover: hover) {
  .tabs__tab:not([aria-selected="true"]):hover {
    color: #c7c7cd;
    transition: color 120ms ease;
  }
}

.tabs__tab[aria-selected="true"] {
  color: var(--color-text);
}

/* The active tab's border fades over from the last one (Healthcare GEM prototype). */
.tabs__tab::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-from), var(--accent-to));
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  opacity: 0;
  pointer-events: none;
  transition: opacity 350ms;
}

.tabs__tab[aria-selected="true"]::after {
  opacity: 1;
}

@media (max-width: 480px) {
  .tabs__list--grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .tabs__list--grid .tabs__tab {
    display: grid;
    place-items: center;
    height: 40px;
    padding: 0 8px;
  }

}

/* Underline tabs (Questions topics). The rule sits inside the row, under the active tab's
   underline. The row reaches 6px past its box so the keyboard focus ring isn't clipped. */
.tabs--underline {
  margin: -6px;
}

.tabs--underline::after {
  content: "";
  position: absolute;
  inset: auto 6px 6px;
  height: 1px;
  background: var(--color-line-faq);
  pointer-events: none;
}

.tabs--underline .tabs__list {
  display: flex;
  gap: 32px;
  padding: 6px;
  border: 0;
  border-radius: 0;
  background: none;
}

.tabs--underline .tabs__tab {
  position: relative;
  z-index: 1;
  padding: 0 0 16px;
  border-radius: 0;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--color-text-quiet);
}

.tabs--underline .tabs__tab::after {
  display: none;
}

.tabs--underline .tabs__tab {
  transition: color 120ms ease;
}

@media (hover: hover) {
  .tabs--underline .tabs__tab:not([aria-selected="true"]):hover {
    color: #c7c7cd;
  }
}

.tabs--underline .tabs__tab[aria-selected="true"] {
  padding: 0 0 14px;
  border-bottom: 2px solid var(--color-text);
  font-weight: 500;
  color: var(--color-text);
}

@media (max-width: 767px) {
  .tabs--underline .tabs__list {
    gap: 24px;
  }

  .tabs--underline .tabs__tab {
    padding-bottom: 12px;
    font-size: 15px;
    line-height: 22px;
  }

  .tabs--underline .tabs__tab[aria-selected="true"] {
    padding-bottom: 10px;
  }
}

/* Chip tabs (Questions industries). Same 6px reach as the underline tabs. */
.tabs--chips {
  margin: -6px;
}

.tabs--chips .tabs__list {
  display: flex;
  gap: 8px;
  padding: 6px;
  border: 0;
  border-radius: 0;
  background: none;
}

.tabs--chips .tabs__tab {
  padding: 6px 14px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--color-text-muted);
}

.tabs--chips .tabs__tab::after {
  display: none;
}

.tabs--chips .tabs__tab {
  transition: color 120ms ease, border-color 120ms ease;
}

@media (hover: hover) {
  .tabs--chips .tabs__tab:not([aria-selected="true"]):hover {
    border-color: #4f4f56;
    color: var(--color-text);
  }
}

.tabs--chips .tabs__tab[aria-selected="true"] {
  border-color: var(--color-text);
  color: var(--color-text);
}

/* Rows that scroll sideways fade at the edges where there is more. */
.tabs--scroll .tabs__list {
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.tabs--scroll .tabs__list::-webkit-scrollbar {
  display: none;
}

.tabs--scroll {
  --fade-left: 0px;
  --fade-right: 0px;
}

.tabs--scroll .tabs__list {
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent 100%);
}

.tabs--scroll.has-more-left {
  --fade-left: 20px;
}

.tabs--scroll.has-more-right {
  --fade-right: 40px;
}

/* On underline tabs the fade runs over the rule too. */
.tabs--underline.tabs--scroll {
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-left), #000 calc(100% - var(--fade-right)), transparent 100%);
}

.tabs--underline.tabs--scroll .tabs__list {
  mask-image: none;
}

.tab-panel[hidden] {
  display: none;
}

/* Carousel: tiles in a sideways row with a dot pill under it. */
.carousel__track {
  --carousel-inset: max(var(--gutter), calc((100% - var(--content)) / 2));
  position: relative;
  display: flex;
  gap: 32px;
  padding-inline: var(--carousel-inset);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--carousel-inset);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.carousel__track::-webkit-scrollbar {
  display: none;
}

/* A mouse can drag the row; touch screens swipe it natively. */
@media (hover: hover) {
  .carousel__track {
    cursor: grab;
  }

  .carousel__track.is-dragging {
    cursor: grabbing;
    user-select: none;
  }
}

.carousel__track img {
  -webkit-user-drag: none;
}

.carousel__tile {
  position: relative;
  flex: 0 0 auto;
  width: 560px;
  height: 640px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-black);
  scroll-snap-align: start;
}

.carousel__tile--wide {
  width: 880px;
}

.carousel__title {
  position: absolute;
  z-index: 2;
  left: 44px;
  width: 448px;
  font-size: 26px;
  line-height: 33px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-align: left;
}

.carousel__title--top {
  top: 48px;
}

.carousel__title--bottom {
  bottom: 48px;
}

.carousel__dots {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 32px;
}

/* Desktop on the industry pages: an arrow each side and slightly different dots. */
.carousel__arrow {
  display: none;
}

@media (min-width: 768px) {
  .carousel--arrows .carousel__dots {
    gap: 16px;
    padding-top: 36px;
  }

  .carousel--arrows .carousel__arrow {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #26262b;
  }

  .carousel--arrows .carousel__pill {
    padding: 10px 14px;
  }

  .carousel--arrows .carousel__dot {
    background: #6b6b72;
  }

  .carousel--arrows .carousel__dot[aria-current="true"] {
    width: 28px;
    background: #fff;
  }
}

.carousel__pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  background: #26262b;
}

.carousel__dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #636366;
  transition: width 300ms var(--ease-out), background-color 300ms ease;
}

/* 24px tap area around each small dot. */
.carousel__dot::before {
  content: "";
  position: absolute;
  inset: -9px -5px;
}

.carousel__dot[aria-current="true"] {
  width: 26px;
  background: #e5e5ea;
}

@media (max-width: 767px) {
  .carousel__track {
    gap: 16px;
  }

  .carousel__tile,
  .carousel__tile--wide {
    width: 332px;
    height: 379px;
  }

  .carousel__title {
    left: 32px;
    width: auto;
    right: 32px;
    font-size: 20px;
    line-height: 25px;
  }

  .carousel__title--top {
    top: 32px;
  }

  .carousel__title--bottom {
    bottom: 32px;
  }
}

/* Hero with light behind it, running under the top of the next section. The Vault System
   and Security; each page sets its image and headline position. */
.light-hero {
  position: relative;
  height: 480px;
  background: var(--color-black);
}

.light-hero__light {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 645px;
  overflow: hidden;
  pointer-events: none;
}

.light-hero__image {
  position: absolute;
  top: calc(195px - max(450px, 31.25vw));
  left: 50%;
  width: max(100%, 1440px);
  aspect-ratio: 1440 / 900;
  transform: translateX(-50%);
}

.light-hero__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Phones load only the middle of the photo, drawn at its own size in the same place. */
@media (max-width: 480px) {
  .light-hero__image img {
    height: 900px;
    object-fit: none;
  }
}

/* A soft band of light rakes slowly across the metal. The prototype lifts a dimmer
   photo by 1.4 times; Paper's brighter photo gets the same lift. */
.light-hero__rake {
  filter: brightness(1.4);
  mask-image: linear-gradient(115deg, transparent 0%, rgb(0 0 0 / 0%) 30%, rgb(0 0 0 / 70%) 50%, rgb(0 0 0 / 0%) 70%, transparent 100%);
  mask-repeat: no-repeat;
  mask-size: 260% 100%;
  animation: light-rake 14s ease-in-out infinite alternate;
}

.light-hero.is-offscreen .light-hero__rake {
  animation-play-state: paused;
}

@keyframes light-rake {
  from {
    mask-position: 100% 0;
  }

  to {
    mask-position: 0% 0;
  }
}

.light-hero__fade-bottom,
.light-hero__fade-top {
  position: absolute;
  left: 0;
  width: 100%;
}

.light-hero__fade-bottom {
  top: 200px;
  height: 445px;
  background: linear-gradient(180deg, #04040700 0%, #0404070f 18%, #04040733 33%, #0404076b 47%, #040407a8 60%, #040407d9 71%, #040407f5 80%, #040407 87%, #040407 100%);
}

.light-hero__fade-top {
  top: 0;
  height: 310px;
  background: linear-gradient(180deg, #040407 0%, #040407eb 22.5%, #040407b3 42.5%, #04040766 65%, #04040726 85%, #04040700 100%);
}

/* Small section headers, with the rule across the top of each section. */
.rule-section {
  --small-inset: max(var(--gutter), calc((100% - var(--content)) / 2));
  position: relative;
  background: var(--color-black);
  scroll-margin-top: 80px;
}

.rule-section::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--small-inset);
  left: var(--small-inset);
  height: 1px;
  background: var(--color-line-soft);
}

.small-head {
  padding-inline: var(--small-inset);
}

.small-head__sub {
  max-width: 500px;
  margin-top: 12px;
  font-size: 20px;
  line-height: 28px;
  color: #a0a0a8;
}

.rule-section > .small-head {
  padding-top: 65px;
}

@media (max-width: 767px) {
  .light-hero {
    height: 380px;
  }

  .light-hero__light {
    height: 640px;
  }

  .light-hero__image {
    top: -260px;
  }

  .light-hero__fade-bottom {
    top: 160px;
    height: 480px;
  }

  .light-hero__fade-top {
    top: -120px;
  }

  .rule-section {
    --small-inset: 32px;
    scroll-margin-top: 56px;
  }

  .small-head__sub {
    margin-top: 10px;
    font-size: 17px;
    line-height: 26px;
  }

  .rule-section > .small-head {
    padding-top: 48px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .light-hero__rake {
    display: none;
  }
}
/* GEM mark and panel, lineup cards, capacity tile, sticky bars and closing
   sections (CLAUDE.md section 7; Paper: The Vault System GEM panel, "Reference ·
   Lineup cards all black (mock)", "Alpha Cube Pro · Sticky bar", "Compare · Mobile
   sticky bar", the product pages' closing sections). */

/* GEM mark: the real geometry viewed straight on, never redrawn. */
.gem-mark {
  display: block;
  flex-shrink: 0;
}

.gem-spinner {
  position: relative;
  display: block;
  flex-shrink: 0;
}

.gem-spinner canvas,
.gem-spinner .gem-mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.gem-spinner.is-live .gem-mark {
  visibility: hidden;
}

/* GEM panel. At rest a plain 1px border. While GEM works, a 2px opal ring travels
   around the edge, a "Working" status spins in the header and the summary line steps
   through what GEM is doing (gem.js, from the GEM panel motion prototypes). */
@property --ring-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 285deg;
}

.gem-panel {
  position: relative;
  width: 100%;
  max-width: 652px;
  border-radius: 16px;
  background: var(--color-black);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 4%),
    0 30px 60px -20px rgb(0 0 0 / 50%),
    0 8px 24px -8px rgb(0 0 0 / 40%);
  text-align: left;
}

.gem-panel::before,
.gem-panel__ring {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  pointer-events: none;
}

.gem-panel::before {
  padding: 1px;
  background: var(--color-line-soft);
}

.gem-panel__ring {
  padding: 2px;
  background: conic-gradient(from var(--ring-angle), rgb(150 168 255 / 0%) 0%, #96a8ff 10%, #cca0ff 24%, #ffa0d4 34%, rgb(255 160 212 / 0%) 46%, rgb(150 168 255 / 0%) 100%);
  opacity: 0;
}

/* Frozen ring, as shown on the four static reference panels in Paper. */
.gem-panel.is-ring-static .gem-panel__ring {
  padding: 1.5px;
  background: conic-gradient(from 285deg, rgb(150 168 255 / 22%) 0%, #96a8ff 13.89%, #cca0ff 27.78%, rgb(204 160 255 / 22%) 44.44%, rgb(150 168 255 / 22%) 100%);
  opacity: 1;
}

.gem-panel__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 18px;
  border-bottom: 1px solid rgb(79 79 86 / 35%);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.gem-panel__context-slash {
  color: #4f4f56;
}

.gem-panel__status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-quiet);
}

.gem-panel__spinner {
  width: 10px;
  height: 10px;
  border: 1.5px solid #3a3a42;
  border-top-color: #cca0ff;
  border-radius: 50%;
  opacity: 0;
}

.gem-panel__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  padding: 24px 22px 26px;
}

.gem-panel__request {
  align-self: flex-end;
  max-width: 84%;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--color-raised);
  font-size: 14px;
  line-height: 21px;
}

/* GEM summary: one gray line and a chevron between request and reply. While GEM
   works, the current step shows in its place with a soft shimmer. */
.gem-panel__work {
  position: relative;
  height: 18px;
  margin-top: 14px;
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
}

.gem-panel__current,
.gem-panel__summary {
  position: absolute;
  inset: 0 auto 0 0;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.gem-panel__current {
  opacity: 0;
}

.gem-panel__current-text {
  background: linear-gradient(90deg, #8c8b94 0%, #8c8b94 38%, #f1f1f7 50%, #8c8b94 62%, #8c8b94 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gem-shimmer 1.8s linear infinite;
}

@keyframes gem-shimmer {
  from {
    background-position: 100% 0;
  }

  to {
    background-position: -160% 0;
  }
}

.gem-panel__summary {
  color: var(--color-text-quiet);
}

.gem-panel__summary-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gem-panel__summary svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.gem-panel__answer {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--color-charcoal);
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-panel);
}

.gem-panel__rows {
  margin-top: 24px;
}

.gem-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 44px;
  border-bottom: 1px solid rgb(79 79 86 / 25%);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-panel);
}

.gem-panel__row-value {
  font-family: var(--font-mono-label);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text);
}

@media (max-width: 767px) {
  .gem-panel__body {
    padding: 20px 16px 22px;
  }

  .gem-panel__request,
  .gem-panel__answer,
  .gem-panel__row {
    font-size: 13px;
  }
}

/* Lineup cards: one black object, border neutral at rest, model color on hover
   or when selected, never all colored at once. */
.lineup {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.lineup-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 24px;
  border-radius: 18px;
  background: var(--card-bg, var(--color-black));
  text-align: left;
}

/* The 1.5px border is drawn on top so its screen rounding never moves the card's layout. */
.lineup-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--color-line-soft);
  border-radius: inherit;
  pointer-events: none;
  transition: border-color 150ms ease;
}

@media (hover: hover) {
  .lineup-card:hover::after {
    border-color: var(--swatch);
  }
}

/* Touch: the model color while pressed, back to neutral on release. */
@media (hover: none) {
  .lineup-card:active::after {
    border-color: var(--swatch);
  }
}

/* blocks.js sets is-pressed on touch, because phones don't always report :active. */
.lineup-card.is-pressed::after,
.lineup-card.is-selected::after {
  border-color: var(--swatch);
}

.lineup-card__media {
  position: relative;
  overflow: hidden;
  height: 300px;
}

/* The Cube keeps one size at every card width, centered, with equal space above
   and below it. Each photo has the Cube at a different height, hence the offsets. */
.lineup-card__media img {
  position: absolute;
  top: var(--photo-top);
  left: 50%;
  width: auto;
  max-width: none;
  height: 387px;
  transform: translateX(-50%);
}

.lineup-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 28px;
}

.lineup-card__name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-size: 22px;
  line-height: 26px;
  font-weight: 600;
}

.lineup-card__line {
  min-height: 52px;
  margin-top: 8px;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-muted);
}

.lineup-card__specs {
  margin: 20px 0 0;
  border-top: 1px solid var(--color-line);
}

.lineup-card__spec {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-line);
  font-size: 14px;
  line-height: 20px;
}

.lineup-card__spec dt {
  color: var(--color-text-muted);
}

.lineup-card__spec dd {
  margin: 0;
  font-family: var(--font-mono-label);
  text-align: right;
}

/* Equal space above and below the buttons: 24px from the last spec rule and from the card edge. */
.lineup-card__actions {
  margin-block: auto;
  padding-top: 24px;
}

/* The whole card opens the product page, as Learn more does. Order stays on top of it. */
.lineup-card__actions .link::before {
  content: "";
  position: absolute;
  inset: 0;
}

.lineup-card__actions .btn-order {
  z-index: 1;
}

.lineup-card__viewing {
  font-size: 13px;
  line-height: 26px;
  color: #8e8e93;
}

@media (max-width: 1023px) {
  .lineup {
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
    margin-inline: auto;
    gap: 16px;
  }
}

@media (max-width: 767px) {
  .lineup-card {
    border-radius: 14px;
  }

  .lineup-card__media {
    height: 240px;
  }

  .lineup-card__media img {
    top: var(--photo-top-phone);
    height: 300px;
  }

  .lineup-card__body {
    padding: 0 20px;
  }

  .lineup-card__name {
    margin-top: 24px;
  }

  .lineup-card__line {
    min-height: 0;
  }
}

/* Once the cards have room to spare and sit in the middle, Compare models sits with them.
   On a phone they fill the width and it stays at the left edge, as in Paper. */
@media (min-width: 485px) and (max-width: 1023px) {
  .home-lineup__compare,
  .pd-lineup__compare {
    text-align: center;
  }
}

/* Capacity tile: the brushed number in the model color. */
.capacity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.capacity__label {
  font-size: 17px;
  line-height: 22px;
  color: #8e8e93;
}

.capacity__label--top {
  padding-bottom: 6px;
}

.capacity__label--bottom {
  padding-top: 10px;
  color: #c7c7cc;
}

.capacity__number {
  padding-inline: 16px;
  font-size: 155px;
  line-height: 147px;
  font-weight: 700;
  letter-spacing: -0.055em;
  color: transparent;
  background-image: var(--sheen), var(--brush), image-set(url("/assets/images/texture-brushed-aluminum-960.avif") type("image/avif"), url("/assets/images/texture-brushed-aluminum-960.webp") type("image/webp"));
  background-position: 120% 0, 50%, 50%;
  background-repeat: no-repeat;
  background-size: 300% 100%, cover, 480px;
  background-blend-mode: normal, overlay, normal;
  -webkit-background-clip: text;
  background-clip: text;
}

.capacity__number--long {
  font-size: 136px;
  line-height: 129px;
}

/* The brushed-metal sheen from the tile prototypes: a band of light crosses the
   number every 7 seconds while it is on screen (product.js adds the class). */
.capacity__number.is-sweeping {
  animation: capacity-sweep 2.6s cubic-bezier(0.45, 0.05, 0.25, 1) forwards;
}

@keyframes capacity-sweep {
  from {
    background-position: 120% 0, 50%, 50%;
  }

  to {
    background-position: -20% 0, 50%, 50%;
  }
}

.capacity {
  --sheen: linear-gradient(105deg, rgb(255 255 255 / 0%) 35%, rgb(240 244 247 / 60%) 48%, rgb(255 255 255 / 0%) 61%);
}

.capacity--cube { --brush: linear-gradient(in oklab 180deg, #c9ced3 0%, #98a0a8 38%, #5a6168 72%, #3a3f45 100%); }
.capacity--pro { --brush: linear-gradient(in oklab 180deg, #f0dca2 0%, #c9a84c 38%, #977628 72%, #5e4718 100%); }
.capacity--ion { --brush: linear-gradient(in oklab 180deg, #bdf0fd 0%, #2ec4f1 38%, #1a7fa1 72%, #0f4f66 100%); }

@media (max-width: 767px) {
  .capacity__label {
    font-size: 13px;
    line-height: 17px;
  }

  .capacity__label--top {
    padding-bottom: 4px;
  }

  .capacity__label--bottom {
    padding-top: 6px;
  }

  .capacity__number {
    padding-inline: 10px;
    font-size: 93px;
    line-height: 88px;
    background-size: 300% 100%, cover, 285px;
  }

  .capacity__number--long {
    font-size: 82px;
    line-height: 77px;
  }
}

/* Sticky bars: black, a neutral 1px rule, shown once the page's own Order
   button has scrolled away. They take their phone layout from their own width
   (a container query), so the parts page can show the phone bars at 390px on a
   desktop screen; a live bar is always the full window width. */
.sticky-bar {
  container: sticky-bar / inline-size;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 45;
  border-bottom: 1px solid var(--color-line);
  background: var(--color-black);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 250ms var(--ease-out), visibility 0s linear 250ms;
}

.sticky-bar.is-shown {
  transform: none;
  visibility: visible;
  transition: transform 250ms var(--ease-out), visibility 0s;
}

.sticky-bar--static {
  position: relative;
  transform: none;
  visibility: visible;
}

.sticky-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 63px; /* 64 with the rule */
  padding: 0 48px;
}

.sticky-bar__name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  line-height: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Compare sticky bar ("Compare · Sticky bar"): 72px, three 344px columns lined up
   with the page's model columns, each with the square, the name and Order. */
.sticky-bar__models {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 344px));
  gap: 12px;
  justify-content: center;
  height: 71px; /* 72 with the rule */
}

.sticky-bar__model {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.sticky-bar__model-name {
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
}

.sticky-bar__model-link {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Compare model columns ("Compare · Desktop" hero): 340 x 333 photo, the name row
   20px below, the summary 8px below, then Order and Learn more 28px below. */
.compare-heads {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 344px));
  gap: 12px;
  justify-content: center;
}

.compare-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* The photo and the name go to the product page, the same as Learn more. */
.compare-head__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.compare-head__image {
  width: 100%;
  max-width: 340px;
}

.compare-head__image img {
  width: 100%;
  height: auto;
}

.compare-head__name {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-size: 28px;
  line-height: 34px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.compare-head__summary {
  margin-top: 8px;
  font-size: 17px;
  line-height: 26px;
  color: var(--color-text-muted);
}

.compare-head__actions {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 28px;
}

.compare-head__actions .link {
  font-size: 16px;
  line-height: 26px;
}

/* Phones ("Compare · Mobile"): three 102px columns, the 10px square above a
   one-line name, and the phone Order button. */
@media (max-width: 767px) {
  .compare-heads {
    grid-template-columns: repeat(3, 102px);
    gap: 10px;
  }

  .compare-head__image {
    width: 102px;
    max-width: 100%;
    height: 100px;
  }

  /* Narrower than the 326 column: three columns share the width, names still on one line. */
  @media (max-width: 357px) {
    .compare-heads {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
    }
  }

  .compare-head__image img {
    height: 100%;
  }

  .compare-head__name {
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .compare-head__swatch {
    width: 10px;
    height: 10px;
  }

  .compare-head__summary {
    margin-top: 4px;
    font-size: 12px;
    line-height: 16px;
  }

  .compare-head__actions {
    flex-direction: column;
    gap: 12px;
    margin-top: 14px;
  }

  .compare-head__actions .link {
    font-size: 14px;
    line-height: 22px;
  }
}

/* Phone sticky bars ("Compare · Mobile sticky bar" and the phone product bar). */
@container sticky-bar (max-width: 767px) {
  .sticky-bar__models {
    grid-template-columns: repeat(3, 102px);
    gap: 10px;
    height: 103px; /* 104 with the rule */
    align-content: center;
  }

  .sticky-bar__model {
    flex-direction: column;
    gap: 10px;
  }

  .sticky-bar__model-name {
    font-size: 13px;
    line-height: 18px;
    white-space: nowrap;
  }

  /* A 44px tap area that takes no extra room. */
  .sticky-bar__model-link {
    flex-direction: column;
    gap: 6px;
    margin-block: -5px;
    padding-block: 5px;
  }

  .sticky-bar__swatch {
    width: 10px;
    height: 10px;
  }

  /* Narrower than the 326 column: three columns share the width, names still on one line. */
  @container sticky-bar (max-width: 357px) {
    .sticky-bar__models {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      padding-inline: 8px;
    }
  }

  /* The phone Order button (buttons.css), here by the bar's width. */
  .sticky-bar .btn-order {
    height: 28px;
    padding-inline: 12px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 16px;
  }

  .sticky-bar .btn-order::after {
    content: "";
    position: absolute;
    inset: -8px 0;
  }

  .sticky-bar__inner {
    height: 55px; /* 56 with the rule */
    padding: 0 24px;
  }

  .sticky-bar__name {
    font-size: 15px;
    line-height: 22px;
  }

  .sticky-bar__inner .link {
    font-size: 14px;
    line-height: 20px;
  }

  .sticky-bar__inner .cta-pair {
    gap: 20px;
  }
}

/* Closing call to action: black, centered, Order paired with Compare models. */
.closing {
  position: relative;
  overflow: hidden;
  padding: var(--section-pad) var(--gutter);
  background: var(--color-black);
  text-align: center;
}

.closing__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.closing__model {
  margin-top: 24px;
}

.closing__model + .closing__headline {
  margin-top: 0;
}

.closing__headline {
  margin-top: 24px;
}

/* The model name always has its own line; the rest of the headline wraps on its own. */
.closing__model-line {
  display: block;
}

.closing__sub {
  margin-top: 32px;
}

.closing__actions {
  margin-top: 36px;
}

.closing__media {
  position: relative;
}

@media (max-width: 767px) {
  /* The longest name runs a little past the 326 column to stay on one line. */
  .closing__model-line {
    margin-inline: -14px;
  }

  .closing__sub {
    margin-top: 28px;
  }

  .closing__actions {
    margin-top: 28px;
  }
}

/* Closing with no photo: The Vault System and Security. */
.closing--plain {
  min-height: 500px;
  padding: 120px var(--gutter) 128px;
}

.closing--plain .closing__sub {
  max-width: none;
}

@media (max-width: 767px) {
  .closing--plain {
    min-height: 0;
    padding: 64px 32px 72px;
  }

  .closing--plain .closing__sub {
    margin-top: 22px;
  }

  .closing--plain .closing__actions {
    gap: 24px;
  }
}

/* Model identifier color (only the identifier takes the color). */
.model-word--ion { color: var(--color-ion); }
.model-word--cube { color: var(--color-cube); }
.model-word--pro { color: var(--color-pro); }
/* Page group 1: error pages, About, Contact and the legal template. */

/* 404 and 500 ("404 · Desktop", "500 · Desktop" and their mobile artboards). */
.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 640px;
  padding-inline: var(--gutter);
  text-align: center;
}

.error-page__code {
  font-size: 24px;
  line-height: 32px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text-quiet);
}

.error-page__headline {
  max-width: 12.5em;
  margin-top: 20px;
}

.error-page__links {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 40px;
}

@media (max-width: 767px) {
  .error-page {
    min-height: 500px;
    padding-inline: 24px;
  }

  .error-page__code {
    font-size: 20px;
    line-height: 28px;
  }

  .error-page__headline {
    margin-top: 16px;
  }

  .error-page__links {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
}

/* About: the founders' letter ("About · Desktop", "About · Mobile"). Type and spacing
   scale smoothly from the 390 phone frame to the 1440 desktop frame. */
.about {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding:
    clamp(72px, calc(72px + 80 * (100vw - 390px) / 1050), 152px)
    32px
    clamp(120px, calc(120px + 80 * (100vw - 390px) / 1050), 200px);
}

.about__letter {
  position: relative;
  z-index: 1;
  max-width: 920px;
  margin: 0 auto;
}

.about__letter h1,
.about__letter p {
  font-size: clamp(20px, calc(20px + 8 * (100vw - 390px) / 1050), 28px);
  line-height: clamp(31px, calc(31px + 11 * (100vw - 390px) / 1050), 42px);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-wrap: pretty;
}

.about__letter p + h1,
.about__letter h1 + p,
.about__letter p + p {
  margin-top: clamp(24px, calc(24px + 12 * (100vw - 390px) / 1050), 36px);
}

.about__signatures {
  display: flex;
  align-items: flex-end;
  gap: 96px;
  margin-top: 64px;
}

.about__signature {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.about__signature--nils img {
  transform: rotate(3deg);
}

.about__signature figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.about__name {
  font-size: 16px;
  line-height: 24px;
}

.about__role {
  font-size: 15px;
  line-height: 22px;
  color: var(--color-text-quiet);
}

/* The V-pattern sits behind the letter only, never behind the header or footer. */
.about__pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.04;
  background: url("/assets/about/about-v-pattern-desktop.svg") 50% -40px / 1800px 2375px no-repeat;
  mask-image:
    radial-gradient(760px 620px at 90% 20%, #000, transparent),
    radial-gradient(820px 700px at 6% 52%, #000, transparent),
    radial-gradient(700px 520px at 78% 88%, rgb(0 0 0 / 60%), transparent);
}

@media (max-width: 767px) {
  .about__signatures {
    gap: 28px;
    margin-top: 40px;
  }

  .about__signature {
    gap: 10px;
    width: 149px;
  }

  .about__signature img {
    width: 149px;
    height: auto;
  }

  .about__signature figcaption {
    gap: 0;
  }

  .about__name {
    font-size: 15px;
    line-height: 22px;
  }

  .about__role {
    font-size: 14px;
    line-height: 20px;
  }

  .about__pattern {
    opacity: 0.055;
    mask-image:
      radial-gradient(300px 460px at 100% 16%, #000, transparent),
      radial-gradient(320px 560px at 0% 48%, #000, transparent),
      radial-gradient(280px 420px at 95% 86%, rgb(0 0 0 / 60%), transparent);
  }
}

/* Contact ("Contact · Desktop", "Contact · Sent · Desktop" and their mobile artboards). */
.contact {
  padding: 96px var(--gutter) 120px;
}

.contact__inner {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}

.contact__inner[hidden] {
  display: none;
}

.contact__headline:focus {
  outline: none;
}

.contact__form {
  margin-top: 56px;
}

.contact__other {
  display: grid;
  gap: 4px;
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--color-line);
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-muted);
  text-align: center;
}

.contact.is-sent {
  min-height: 640px;
  padding-bottom: 0;
  scroll-margin-top: var(--header-h);
  text-align: center;
}

.contact__sent-line {
  margin-top: 16px;
  font-size: 18px;
  line-height: 28px;
  color: var(--color-text-muted);
}

.contact__sent-book {
  margin-top: 40px;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .contact {
    padding: 72px 24px 96px;
  }

  .contact__form {
    margin-top: 40px;
  }

  .contact__other {
    font-size: 15px;
    line-height: 22px;
  }

  .contact.is-sent {
    min-height: 420px;
  }

  .contact__sent-line {
    font-size: 16px;
    line-height: 26px;
  }
}

/* Order at launch: the waitlist ("Order · Waitlist" and its confirmation). */
.order {
  padding: 96px var(--gutter) 120px;
}

.order__inner {
  width: 100%;
  max-width: 640px;
  margin-inline: auto;
}

.order__inner[hidden],
.order__image[hidden],
.order__model[hidden],
.order__model-name[hidden] {
  display: none;
}

.order__headline:focus {
  outline: none;
}

.order__sub {
  margin-top: 12px;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-muted);
}

.order__form {
  margin-top: 56px;
}

.order.is-done {
  padding: 8px var(--gutter) 160px;
}

.order__done {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.order__image {
  width: min(440px, 100%);
  aspect-ratio: 440 / 396;
}

.order__image picture,
.order__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.order__model {
  margin-top: 20px;
}

.order__model-name {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
}

.order__done .order__headline {
  margin-top: 20px;
}

.order__done-line {
  margin-top: 22px;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-muted);
}

@media (max-width: 767px) {
  .order {
    padding: 56px 24px 96px;
  }

  .order__form {
    margin-top: 40px;
  }

  .order.is-done {
    padding: 24px 24px 96px;
  }

  .order__image {
    width: min(300px, 100%);
  }

  .order__model {
    margin-top: 16px;
  }

  .order__model-name {
    font-size: 16px;
  }

  .order__model-name .swatch {
    width: 12px;
    height: 12px;
  }

  .order__done .order__headline {
    margin-top: 16px;
  }

  .order__done-line {
    margin-top: 20px;
    font-size: 15px;
    line-height: 24px;
  }
}

/* Legal template ("Legal · Privacy Policy", "Legal · Regulatory Information",
   "Reference · Legal mobile menu"; specs/legal-pages-prompt.md). */
.legal {
  display: grid;
  grid-template-columns: 280px minmax(0, 720px);
  gap: 96px;
  padding: 96px var(--gutter) 160px;
  --clause-col: 44px;
  --item-col: 40px;
}

/* The Terms run to clause numbers like 32.10, wider than the 44px column. */
.legal--parts {
  --clause-col: 56px;
}

/* It stays exactly where it lands: the sticky top is its starting position. */
.legal__side {
  position: sticky;
  top: calc(var(--header-h) + 96px);
  align-self: start;
}

.legal__side-title {
  padding-bottom: 20px;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
}

.legal-docs__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 4px 7px 20px;
  border-left: 1px solid var(--color-line);
  color: var(--color-text-quiet);
  font-size: 15px;
  line-height: 22px;
  transition: color 120ms ease;
}

.legal-docs__link:focus-visible {
  outline-offset: -2px;
}

.legal-docs__link[aria-current] {
  font-weight: 500;
  color: var(--color-text);
}

.legal-docs__link .legal-chevron {
  width: 12px;
  height: 12px;
}

.legal-docs__link[aria-expanded="true"] .legal-chevron path {
  stroke: var(--color-text);
}

/* The open document's sections. A long list scrolls inside the nav, so all four documents
   always stay visible below it. */
.legal-sections {
  max-height: max(140px, calc(100vh - 420px));
  padding-top: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}

.legal-sections::-webkit-scrollbar {
  display: none;
}

.legal-sections.has-more {
  mask-image: linear-gradient(#000 calc(100% - 32px), transparent);
}

.legal-sections li {
  text-wrap: wrap;
}

.legal-sections__link {
  display: block;
  padding: 5px 0 5px 36px;
  border-left: 1px solid var(--color-line);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-quiet);
  transition: color 120ms ease;
}

.legal-sections__link:focus-visible {
  outline-offset: -2px;
}

.legal-sections__link[aria-current] {
  border-left-color: var(--color-text);
  color: var(--color-text);
}

@media (hover: hover) {
  .legal-docs__link:hover,
  .legal-sections__link:hover {
    color: var(--color-text);
  }
}

.legal__title {
  font-size: var(--legal-title-size);
  line-height: var(--legal-title-line);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.legal__meta {
  margin-top: 16px;
  font-size: 15px;
  line-height: 22px;
  color: var(--color-text-quiet);
}

.legal__rule {
  height: 1px;
  margin: 48px 0 40px;
  border: 0;
  background: var(--color-line-faq);
}

.legal__rule--no-date {
  margin-top: 40px;
}

.legal__body {
  font-size: 17px;
  line-height: 28px;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

.legal__body strong {
  font-weight: 500;
  color: var(--color-text);
}

.legal__body > * {
  margin-top: 16px;
}

.legal__body > :first-child,
.legal-part + *,
.legal-h2 + *,
.legal-h3 + * {
  margin-top: 0;
}

.legal__body > .legal-part {
  margin-top: 96px;
  margin-bottom: 24px;
  font-size: var(--section-title-size);
  line-height: var(--section-title-line);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  scroll-margin-top: calc(var(--header-h) + 24px);
}

.legal__body > .legal-h2 {
  margin-top: 64px;
  margin-bottom: 20px;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
  scroll-margin-top: calc(var(--header-h) + 24px);
}

/* A section link lands its heading level with the open document in the nav. */
@media (min-width: 1024px) {
  html:has(.legal__side) {
    scroll-behavior: smooth;
  }

  .legal__body > .legal-h2,
  .legal__body > .legal-part {
    scroll-margin-top: 224px;
  }
}

.legal__body > :first-child.legal-h2,
.legal__body > :first-child.legal-part {
  margin-top: 0;
}

.legal__body > .legal-h3 {
  margin-top: 32px;
  margin-bottom: 12px;
  font-size: 18px;
  line-height: 28px;
  font-weight: 600;
  color: var(--color-text);
}

.legal-clause {
  display: grid;
  grid-template-columns: var(--clause-col) minmax(0, 1fr);
}

.legal__body > .legal-clause + .legal-clause {
  margin-top: 20px;
}

.legal-clause__num {
  font-weight: 500;
  color: var(--color-text);
}

.legal-item {
  display: grid;
  grid-template-columns: var(--item-col) minmax(0, 1fr);
  margin-left: var(--clause-col);
}

.legal__body > .legal-item + .legal-item {
  margin-top: 12px;
}

.legal-bullet {
  position: relative;
  padding-left: 24px;
}

.legal-bullet::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-text-quiet);
}

.legal__body > .legal-bullet + .legal-bullet {
  margin-top: 12px;
}

.legal-note {
  font-size: 15px;
  line-height: 24px;
}

.legal__body > .legal-note + .legal-note {
  margin-top: 8px;
}

.legal-table {
  overflow-x: auto;
}

.legal-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 24px;
}

.legal-table th,
.legal-table td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--color-line-faq);
  text-align: left;
  vertical-align: top;
}

.legal-table th {
  font-weight: 400;
  color: var(--color-text-quiet);
}

.legal__body > .legal-details {
  margin-top: 24px;
  border-top: 1px solid var(--color-line-faq);
}

.legal-details > div {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  padding-block: 14px;
  border-bottom: 1px solid var(--color-line-faq);
}

.legal-details dt {
  font-size: 15px;
  color: var(--color-text-quiet);
}

.legal-details dd {
  margin: 0;
  color: var(--color-text);
}

.legal-lines span {
  display: block;
}

.legal-lines {
  color: var(--color-text);
}

.legal__body > .legal-sign {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-top: 48px;
  font-size: 15px;
  line-height: 24px;
}

.legal-sign__head {
  font-weight: 500;
  color: var(--color-text);
}

.legal-sign__row {
  padding-block: 12px;
  border-bottom: 1px solid var(--color-line-faq);
}

.legal-menu {
  display: none;
}

.legal-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 200ms var(--ease-out);
}

[aria-expanded="true"] > .legal-chevron {
  transform: rotate(180deg);
}

/* Below the desktop header there is no sidebar: a document menu takes its place. */
@media (max-width: 1023px) {
  .legal {
    display: block;
    padding: 24px 24px 120px;
    --clause-col: 36px;
    --item-col: 36px;
  }

  .legal--parts {
    --clause-col: 48px;
  }

  .legal__side {
    display: none;
  }

  .legal__doc {
    max-width: 720px;
    margin-inline: auto;
  }

  .legal-menu {
    position: relative;
    display: block;
  }

  .legal-menu__button {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 52px;
    padding-inline: 16px;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    background: #18181b;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    text-align: left;
  }

  .legal-menu__panel {
    position: absolute;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 2;
    padding-block: 6px;
    border: 1px solid var(--color-line);
    border-radius: 12px;
    background: #18181b;
  }

  .legal-menu__panel[hidden],
  .legal-menu__scrim[hidden] {
    display: none;
  }

  .legal-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    font-size: 16px;
    line-height: 22px;
    color: var(--color-text-muted);
  }

  .legal-menu__link[aria-current] {
    font-weight: 500;
    color: var(--color-text);
  }

  .legal-menu__link svg {
    width: 16px;
    height: 16px;
  }

  /* Dims the page below the field; the header and the field stay above it. */
  .legal-menu__scrim {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgb(4 4 7 / 55%);
  }

  .legal__title {
    margin-top: 40px;
  }

  .legal__meta {
    margin-top: 12px;
    font-size: 14px;
    line-height: 20px;
  }

  .legal__rule {
    display: none;
  }

  .legal__body {
    margin-top: 28px;
    font-size: 16px;
    line-height: 26px;
  }

  .legal__body > * {
    margin-top: 14px;
  }

  .legal__body > :first-child,
  .legal-part + *,
  .legal-h2 + *,
  .legal-h3 + * {
    margin-top: 0;
  }

  .legal__body > .legal-part {
    margin-top: 64px;
    margin-bottom: 20px;
  }

  .legal__body > .legal-h2 {
    margin-top: 44px;
    margin-bottom: 16px;
    font-size: 21px;
    line-height: 28px;
  }

  .legal__body > :first-child.legal-h2,
  .legal__body > :first-child.legal-part {
    margin-top: 0;
  }

  .legal__body > .legal-h3 {
    margin-top: 28px;
    margin-bottom: 10px;
    font-size: 17px;
    line-height: 26px;
  }

  .legal__body > .legal-clause + .legal-clause {
    margin-top: 16px;
  }

  .legal-bullet::before {
    top: 11px;
  }

  .legal-table table {
    min-width: 640px;
  }

  /* Headers on one line, so a long one off to the side doesn't leave a band under the short ones. */
  .legal-table th {
    white-space: nowrap;
  }

  .legal-details > div {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .legal-details dt {
    font-size: 14px;
  }
}

@media print {
  .site-header,
  .site-footer,
  .site-dim,
  .skip-link,
  .legal__side,
  .legal-menu,
  .legal__rule {
    display: none !important;
  }

  html,
  body,
  .legal__body,
  .legal__meta,
  .legal__body strong,
  .legal__title,
  .legal__body > *,
  .legal-clause__num,
  .legal-details dd,
  .legal-details dt,
  .legal-table th {
    background: #fff;
    color: #000;
  }

  .legal {
    display: block;
    padding: 0;
  }
}
/* Homepage ("Homepage · Desktop", "Homepage · Mobile"). Motion from "Motion prototypes/
   homepage-hero-zoom.html", "homepage-gem-vaultos.html", "homepage-gem-vaultos-mobile.html"
   and "industries.html"; home.js plays it. */

/* Hero: the photo sits under a fixed left fade and is the only thing that moves. */
.home-hero {
  position: relative;
  height: 729px;
  overflow: hidden;
  background: var(--color-black);
}

.home-hero__photo {
  --hero-drift-x: -26px;
  --hero-drift-y: 10px;
  position: absolute;
  top: -23px;
  left: max(420px, calc(100% - 916px));
  width: 1045px;
  aspect-ratio: 1045 / 831;
  transform-origin: 55% 45%;
  animation: home-hero-push 16s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
  will-change: transform;
}

.home-hero.is-offscreen .home-hero__photo {
  animation-play-state: paused;
}

.home-hero__photo picture {
  height: 100%;
}

.home-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes home-hero-push {
  from {
    transform: scale(1) translate(0, 0);
  }

  to {
    transform: scale(1.13) translate(var(--hero-drift-x), var(--hero-drift-y));
  }
}

.home-hero__fade {
  position: absolute;
  top: 0;
  left: calc(max(420px, calc(100% - 916px)) - 484px);
  width: 940px;
  height: 900px;
  background: linear-gradient(in oklab 90deg, #040407 0%, #040407 42%, #04040700 100%);
}

.home-hero__content {
  position: relative;
  padding: 246px var(--gutter) 0 max(var(--gutter), calc((100% - var(--content)) / 2));
}

.home-hero__title {
  max-width: 8.6em;
  margin-inline: 0;
}

.home-hero__sub {
  width: 480px;
  max-width: 100%;
  margin-top: 24px;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-muted);
}

.home-hero__actions {
  margin-top: 36px;
  gap: 28px;
}

@media (max-width: 767px) {
  .home-hero {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  .home-hero__content {
    order: -1;
    padding: 96px var(--gutter) 0;
  }

  .home-hero__sub {
    width: auto;
  }

  .home-hero__frame {
    position: relative;
    flex: none;
    height: min(calc(388 / 390 * 100vw), 480px);
    margin-top: 16px;
    overflow: hidden;
  }

  .home-hero__photo {
    --hero-drift-x: -14.4px;
    --hero-drift-y: 5.5px;
    top: calc(-89 / 390 * 100vw);
    left: calc(-99 / 390 * 100%);
    width: calc(580 / 390 * 100%);
    aspect-ratio: 580 / 477;
  }

  .home-hero__fade {
    left: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(in oklab 180deg, #040407 0%, #04040700 100%);
  }
}

/* Meet GEM: the prompts and the VaultOS window. */
.vos-prompts {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-top: 56px;
}

.vos-prompts__gem {
  flex: none;
  margin-left: -2px;
}

.vos-prompts__gem .gem-spinner {
  width: 88px;
  height: 88px;
}

.vos-chips {
  display: flex;
  flex: 1;
  gap: 16px;
  min-width: 0;
}

.vos-chip {
  position: relative;
  display: flex;
  flex: 1 1 0;
  gap: 8px;
  min-width: 0;
  padding: 18px 44px 18px 20px;
  border: 1px solid var(--color-line-soft);
  border-radius: var(--radius-choice);
  background: var(--color-panel);
  font-size: 14px;
  line-height: 21px;
  text-align: left;
  transition: border-color 150ms ease;
}

.vos-chip.is-on {
  border-color: transparent;
  background:
    linear-gradient(rgb(204 160 255 / 6%), rgb(204 160 255 / 6%)) padding-box,
    linear-gradient(var(--color-panel), var(--color-panel)) padding-box,
    linear-gradient(90deg, var(--gem-cool-from), var(--gem-cool-to)) border-box;
}

.vos-chip__short {
  display: none;
}

.vos-chip__caret {
  flex: none;
  font-weight: 700;
  color: #7d96f0;
}

.vos-chip__glow {
  position: absolute;
  inset: -1px;
  padding: 1.5px;
  border-radius: var(--radius-choice);
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  opacity: 0;
  pointer-events: none;
}

.vos-window {
  position: relative;
  display: flex;
  height: 744px;
  margin-top: 28px;
  overflow: hidden;
  border: 1px solid #2a2a30;
  border-radius: 16px;
  background: var(--color-black);
}

.vos-side {
  position: relative;
  flex: none;
  width: 260px;
  border-right: 1px solid #232328;
  background: var(--color-charcoal);
}

.vos-side__logo,
.vos-side__toggle,
.vos-side__new,
.vos-side__icon,
.vos-side__text,
.vos-side__label,
.vos-side__meta,
.vos-side__bar,
.vos-recents,
.vos-side__account,
.vos-side__avatar {
  position: absolute;
}

.vos-side__logo {
  top: 20px;
  left: 26px;
  width: 86px;
  height: 20px;
}

.vos-side__toggle {
  top: 20px;
  left: 219px;
}

.vos-side__new {
  top: 82px;
  left: 26px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #26262b;
  font-size: 14px;
  line-height: 18px;
  color: #a0a0a8;
}

.vos-side__new i {
  font-style: normal;
}

.vos-side__icon {
  left: 26px;
}

.vos-side__text {
  font-size: 14px;
  line-height: 18px;
  color: #e4e4ea;
  white-space: nowrap;
}

.vos-side__label,
.vos-side__meta {
  left: 26px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  color: var(--color-text-quiet);
  white-space: nowrap;
}

.vos-side__label {
  letter-spacing: 0.88px;
}

.vos-side__meta--end {
  right: 26px;
  left: auto;
}

.vos-side__bar {
  left: 26px;
  width: 207px;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: #26262b;
}

.vos-side__bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: #6ee8ec;
}

.vos-recents {
  top: 516px;
  left: 16px;
  width: 227px;
  height: 136px;
}

.vos-recent {
  position: absolute;
  inset: 0 0 auto;
  height: 34px;
  padding: 8px 10px;
  overflow: hidden;
  border-radius: var(--radius-button);
  font-size: 14px;
  line-height: 18px;
  color: #c9c9d1;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: transform 500ms cubic-bezier(0.3, 0.7, 0.2, 1), opacity 400ms, background-color 400ms, color 400ms;
}

.vos-recent.is-on {
  background: #1f1f25;
  color: var(--color-text);
}

.vos-side__account {
  top: 675px;
  left: 0;
  width: 259px;
  height: 45px;
  border-top: 1px solid #232328;
}

.vos-side__avatar {
  top: 14px;
  left: 22px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #26262b;
}

.vos-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.vos-top {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 60px;
  padding: 0 20px;
  border-bottom: 1px solid #1d1d22;
}

.vos-top__menu {
  display: none;
  flex: none;
}

.vos-top__more {
  flex: none;
}

.vos-top__title {
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  line-height: 19px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: opacity 250ms;
}

.vos-chat {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  padding-top: 26px;
}

.vos-col {
  width: min(760px, calc(100% - 40px));
  transition: opacity 250ms;
}

.vos-conv[hidden] {
  display: none;
}

.vos-att {
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  margin: 0 0 8px auto;
  padding: 10px 16px 10px 12px;
  border: 1px solid #2a2a30;
  border-radius: var(--radius-choice);
  background: #0d0d11;
}

.vos-att__icon {
  flex: none;
  width: 18px;
  height: 18px;
}

.vos-att__name {
  font-size: 14px;
  line-height: 18px;
}

.vos-att__meta {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  color: var(--color-text-quiet);
}

.vos-ask {
  width: max-content;
  max-width: min(520px, 100%);
  margin-left: auto;
  padding: 12px 16px;
  border-radius: 14px;
  background: #1c1c22;
  font-size: 15px;
  line-height: 22px;
}

.vos-who {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 22px;
  margin-top: 20px;
}

.vos-who__mark {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
}

.vos-who__mark svg,
.vos-who__mark canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.vos-who__mark canvas {
  display: none;
}

.vos-who__mark.is-live canvas {
  display: block;
}

.vos-who__mark.is-live svg {
  visibility: hidden;
}

.vos-who__line {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-quiet);
}

/* One line, ending in an ellipsis at a word when it doesn't fit (as Paper does it). */
.vos-who__text,
.ind-panel__body .gem-panel__summary-text {
  display: -webkit-box;
  min-width: 0;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}

.home-chevron {
  flex: none;
}

.vos-who__line.is-working .home-chevron {
  display: none;
}

.vos-who__line.is-working .vos-who__text {
  background: linear-gradient(90deg, #8c8b94 0%, #8c8b94 38%, #f1f1f7 50%, #8c8b94 62%, #8c8b94 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gem-shimmer 1.8s linear infinite;
}

.vos-ans {
  margin-top: 12px;
  padding: 20px 24px;
  overflow: hidden;
  border: 1px solid #232328;
  border-radius: 14px;
  background: #0d0d11;
  font-size: 15px;
  line-height: 23px;
  color: #e4e4ea;
}

.vos-table {
  width: 100%;
  margin-top: 16px;
  border-collapse: collapse;
}

.vos-table th {
  padding: 0 0 10px;
  border-bottom: 1px solid #232328;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-align: left;
  color: var(--color-text-quiet);
}

.vos-table td {
  padding: 8px 0;
  border-bottom: 1px solid #1d1d22;
  font-size: 14px;
}

.vos-table th:last-child,
.vos-table td:last-child {
  text-align: right;
}

.vos-table .vos-table__mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #a0a0a8;
}

.vos-tag {
  padding: 4px 8px;
  border: 1px solid #2a2a30;
  border-radius: 6px;
  background: #1a1a20;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #a0a0a8;
  white-space: nowrap;
}

.vos-tag--ok {
  border-color: #7fddb440;
  background: #7fddb412;
  color: #7fddb4;
}

.vos-tag--run {
  border-color: #6ee8ec40;
  background: #6ee8ec12;
  color: #6ee8ec;
}

.vos-tag--warn {
  border-color: #ffc08f38;
  background: #ffc08f0f;
  color: #ffc08f;
}

.vos-progress__row {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  font-size: 14px;
  color: #a0a0a8;
}

.vos-progress b {
  font-weight: 600;
  color: var(--color-text);
}

.vos-progress__track {
  height: 6px;
  margin-top: 10px;
  border-radius: 3px;
  background: #1c1c22;
}

.vos-progress__track i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: #6ee8ec;
}

.vos-close {
  margin-top: 16px;
}

.vos-input {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  width: min(760px, calc(100% - 40px));
  height: 54px;
  margin: auto 0 24px;
  padding: 0 9px 0 17px;
  border: 1px solid #2a2a30;
  border-radius: 14px;
  background: #0d0d11;
  font-size: 14px;
  line-height: 18px;
  color: #7a7a81;
}

.vos-input__send {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: #26262b;
}

/* While a conversation plays (home.js): each piece rises in, tables build. */
.vos-rv {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 450ms ease, transform 550ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.vos-rv.in {
  opacity: 1;
  transform: none;
}

.vos-grow {
  opacity: 0;
  transition: opacity 300ms;
}

.vos-grow.in {
  opacity: 1;
}

.vos-row {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 450ms ease, transform 550ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.vos-row.in {
  opacity: 1;
  transform: none;
}

.vos-hid {
  display: none;
}

/* The lineup is the same color, so its own top padding counts toward the link's gap. */
.home-gem {
  padding-bottom: calc(var(--link-edge) - var(--section-pad));
}

.home-gem__more {
  margin-top: var(--link-gap);
}

@media (max-width: 1023px) {
  .vos-prompts {
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    margin-top: 40px;
  }

  .vos-prompts__gem {
    align-self: center;
    margin-left: 0;
  }

  .vos-prompts__gem .gem-spinner {
    width: 90px;
    height: 90px;
  }

  .vos-chips {
    flex-direction: column;
    gap: 12px;
  }

  .vos-chip {
    flex: none;
  }

  .vos-side {
    display: none;
  }
}

@media (max-width: 767px) {
  /* The prompts become one row of rectangular tabs, under the same tab style as the industry
     pages' GEM tabs. The window fits on one screen with them: no attachment, no closing line. */
  .vos-prompts {
    gap: 16px;
  }

  .vos-chips {
    flex-direction: row;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--color-line-soft);
    border-radius: var(--radius-choice);
    background: var(--color-panel);
  }

  .vos-chip {
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0;
    border-color: transparent;
    border-radius: 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #a0a0a8;
    white-space: nowrap;
    text-align: center;
  }

  .vos-chip.is-on {
    border-width: 1.5px;
    background:
      linear-gradient(var(--color-panel), var(--color-panel)) padding-box,
      linear-gradient(90deg, var(--gem-cool-from), var(--gem-cool-to)) border-box;
    color: var(--color-text);
  }

  .vos-chip__glow {
    border-radius: 8px;
  }

  .vos-chip__caret,
  .vos-chip__text {
    display: none;
  }

  .vos-chip__short {
    display: inline;
  }

  .vos-conv .vos-att,
  .vos-conv .vos-close {
    display: none;
  }

  .vos-window {
    height: max(492px, calc(492px + (390px - 100vw) * 0.7));
    margin-top: 16px;
    border-radius: 14px;
  }

  .vos-top {
    height: 50px;
    padding: 0 14px;
  }

  .vos-top__menu {
    display: block;
  }

  .vos-top__title {
    flex: 1;
    font-size: 14px;
    line-height: 18px;
  }

  .vos-chat {
    padding: 10px 14px 0;
  }

  .vos-col {
    width: 100%;
  }

  .vos-att {
    gap: 10px;
    padding: 8px 12px 8px 10px;
    border-radius: var(--radius-field);
  }

  .vos-att__icon {
    width: 16px;
    height: 16px;
  }

  .vos-att__name {
    font-size: 13px;
    line-height: 17px;
  }

  .vos-att__meta {
    font-size: 10px;
    line-height: 13px;
  }

  .vos-ask {
    max-width: 250px;
    padding: 10px 14px;
    border-radius: var(--radius-choice);
    font-size: 14px;
    line-height: 21px;
  }

  .vos-who {
    gap: 8px;
    height: 20px;
    margin-top: 10px;
  }

  .vos-who__mark {
    width: 20px;
    height: 20px;
  }

  .vos-ans {
    margin-top: 6px;
    padding: 10px 14px;
    border-radius: var(--radius-choice);
    font-size: 14px;
    line-height: 21px;
  }

  .vos-table {
    margin-top: 8px;
  }

  .vos-table th {
    padding-bottom: 6px;
    font-size: 10px;
  }

  .vos-table td {
    padding: 4px 0;
    font-size: 13px;
    white-space: nowrap;
  }

  .vos-table .vos-table__mono {
    font-size: 12px;
  }

  /* Phones leave out the sample column, as in the mobile prototype. */
  .vos-table--lab th:first-child,
  .vos-table--lab td:first-child {
    display: none;
  }

  .vos-tag {
    padding: 3px 6px;
    border-radius: 5px;
    font-size: 10px;
  }

  .vos-progress__row {
    margin-top: 8px;
    font-size: 13px;
  }

  .vos-progress__track {
    height: 5px;
    margin-top: 8px;
  }

  .vos-input {
    width: 100%;
    height: 46px;
    margin-bottom: 12px;
    padding: 0 6px 0 13px;
    border-radius: var(--radius-choice);
  }

  .vos-input__send {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-button);
  }
}

/* Lineup */
.home-lineup__cards {
  margin-top: 64px;
}

.home-lineup {
  padding-bottom: var(--link-edge);
}

.home-lineup__compare {
  height: 27px;
  margin-top: var(--link-gap);
}

@media (max-width: 767px) {
  .home-lineup__cards {
    margin-top: 48px;
  }

  .home-lineup__compare {
    height: auto;
  }
}

/* Security statement */
/* One sentence per line. */
.home-security__title span {
  display: block;
}

.home-security__points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px 64px;
  max-width: 960px;
  margin: 80px auto 0;
  text-align: left;
}

.home-security__point {
  padding-top: 24px;
  border-top: 1px solid var(--color-line-soft);
}

.home-security__mark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono-label);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-quiet);
}

.home-security__point h3 {
  margin-top: 16px;
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
}

.home-security__point p {
  margin-top: 8px;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-muted);
}

.home-security {
  padding-bottom: var(--link-edge);
}

.home-security__more {
  margin-top: var(--link-gap);
}

@media (max-width: 767px) {
  .home-security__title {
    font-size: min(var(--display-size), calc((100vw - 2 * var(--gutter)) / 7.76));
    line-height: 1.095;
  }

  .home-security {
    text-align: left;
  }

  .home-security .section__head {
    align-items: flex-start;
  }

  .home-security__points {
    display: block;
    margin-top: 40px;
  }

  .home-security__point {
    padding-block: 24px;
  }

  .home-security__point:last-child {
    border-bottom: 1px solid var(--color-line-soft);
  }

  .home-security__mark {
    gap: 8px;
  }

  .home-security__point h3 {
    margin-top: 14px;
    font-size: 20px;
    line-height: 26px;
  }

  .home-security__point p {
    margin-top: 6px;
  }
}

/* Industries: rows on the left, the active GEM panel on the right. Below 1280 the
   panel opens under its row, which is the phone layout in Paper. */
.home-industries {
  padding-bottom: var(--link-edge);
}

.home-industries .section__head {
  max-width: 880px;
}

.home-industries .t-subhead {
  max-width: 820px;
}

.ind {
  position: relative;
  min-height: 536px;
  margin-top: 64px;
  overflow-anchor: none;
  transition: opacity 180ms ease;
}

.ind::before {
  content: "";
  display: block;
  width: 604px;
  height: 1px;
  background: var(--color-line-soft);
}

.ind__item {
  width: 604px;
  border-bottom: 1px solid var(--color-line-soft);
}

.ind__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 26px 0;
  border-radius: 2px;
  text-align: left;
}

.ind__name {
  font-size: 44px;
  line-height: 48px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: rgb(241 241 247 / 38%);
  white-space: nowrap;
  transition: color 350ms;
}

.ind__line {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: color 350ms;
}

.ind__item.is-active .ind__name {
  color: var(--color-text-strong);
}

.ind__item.is-active .ind__line {
  color: var(--color-text);
}

.ind__slot {
  position: absolute;
  top: 0;
  right: 0;
  left: 660px;
  z-index: 1;
}

.ind__slot[hidden] {
  display: none;
}

/* Only on phones: the tabs, the one line under them and the link under the panel. */
.ind-tabs,
.ind__blurb,
.ind__see {
  display: none;
}

.ind__slot.is-leaving {
  z-index: 2;
  opacity: 0;
  transition: opacity 250ms;
}

.ind-panel {
  display: flex;
  height: 536px;
  max-width: none;
  padding: 1.5px;
}

.ind-panel__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border-radius: 14.5px;
}

.ind-panel__header {
  flex: none;
}

.ind-panel__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 24px 22px 26px;
}

.ind-panel__q {
  display: flex;
  justify-content: flex-end;
}

.ind-panel__q p {
  max-width: 84%;
  padding: 12px 14px;
  border-radius: var(--radius-choice);
  background: var(--color-raised);
  font-size: 14px;
  line-height: 21px;
}

/* Browsers without text-wrap: pretty (Firefox) could leave one word on a panel's last line. */
@supports not (text-wrap: pretty) {
  .ind-panel__q p,
  .ind-panel__a {
    text-wrap: balance;
  }
}

.ind-panel__a {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius-choice);
  background: var(--color-charcoal);
  font-size: 14px;
  line-height: 22px;
  color: var(--color-text-panel);
}

.ind-table {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  margin-top: 22px;
}

.ind-table thead,
.ind-table tbody {
  display: contents;
}

.ind-table th,
.ind-table td {
  display: block;
  padding: 0;
  font-weight: 400;
  text-align: left;
}

.ind-table__head,
.ind-table__row {
  display: grid;
  grid-template-columns: var(--ind-cols);
  align-items: center;
  border-bottom: 1px solid rgb(79 79 86 / 25%);
}

.ind-table__head {
  flex: none;
  height: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.08em;
  color: var(--color-text-quiet);
}

.ind-table .ind-table__head > :last-child,
.ind-table .ind-table__row > :last-child {
  text-align: right;
}

.ind-table__row {
  flex: 1;
  min-height: 44px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-panel);
}

.ind-table--legal .ind-table__row {
  min-height: 40px;
}

.ind-table__mid {
  font-size: 13px;
  line-height: 18px;
  color: #a0a0a8;
}

.ind-table__tag {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--gem-3);
}

.ind-cols--health { --ind-cols: minmax(0, 1fr) 150px 110px; }
.ind-cols--education { --ind-cols: minmax(0, 1fr) 130px 100px; }
.ind-cols--finance { --ind-cols: minmax(0, 1fr) 130px 120px; }
.ind-cols--legal { --ind-cols: minmax(0, 1fr) 190px 130px; }

.ind-tiles {
  display: grid;
  flex: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.ind-tile {
  padding: 10px 14px;
  border: 1px solid rgb(79 79 86 / 25%);
  border-radius: var(--radius-field);
}

.ind-tile__label {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.08em;
  color: var(--color-text-quiet);
}

.ind-tile__value {
  margin-top: 4px;
  font-size: 22px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.ind-chart {
  margin-top: 18px;
  padding: 14px 0 6px;
  overflow: hidden;
  border: 1px solid rgb(79 79 86 / 25%);
  border-radius: var(--radius-choice);
}

.ind-chart__head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 0 16px 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.08em;
  color: var(--color-text-quiet);
}

.ind-chart__legend {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ind-chart__dash {
  display: block;
  width: 16px;
  border-top: 1px dashed var(--color-text-quiet);
}

.ind-chart__dot {
  display: block;
  width: 8px;
  height: 8px;
  margin-left: 10px;
  border-radius: 4px;
  background: var(--gem-4);
}

.ind-chart__svg {
  width: 100%;
  height: auto;
  max-width: 591px;
}

.ind-chart__svg--phone {
  display: none;
  max-width: none;
}

.ind-chart__label {
  font-family: var(--font-mono);
  font-size: 10px;
  fill: var(--color-text-quiet);
}

.ind-chart__label--tracked {
  letter-spacing: 0.08em;
}

.ind-chart .od {
  transform-box: fill-box;
  transform-origin: center;
}

.home-industries__more {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--link-gap);
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-muted);
}

@media (min-width: 1280px) and (max-width: 1439px) {
  .ind-cols--legal { --ind-cols: minmax(0, 1fr) 130px 100px; }
  .ind-cols--health { --ind-cols: minmax(0, 1fr) 100px 90px; }
  .ind-cols--education { --ind-cols: minmax(0, 1fr) 100px 80px; }
  .ind-cols--finance { --ind-cols: minmax(0, 1fr) 90px 110px; }

  .ind-chart__head {
    flex-direction: column;
  }
}

@media (max-width: 1279px) {
  .ind {
    min-height: 0;
  }

  .ind::before,
  .ind__item {
    width: auto;
  }

  .ind__slot {
    position: static;
    padding-bottom: 26px;
  }

  .ind-panel {
    max-width: 652px;
  }
}

@media (max-width: 767px) {
  .home-industries .t-subhead {
    max-width: none;
  }

  /* All five industries share one grid cell, so the panel is the height of the tallest
     at every width and nothing moves when the industry changes. */
  .ind {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 32px;
  }

  .ind::before,
  .ind__heading {
    display: none;
  }

  .ind-tabs {
    display: block;
    grid-row: 1;
    margin-inline: calc(var(--gutter) * -1);
  }

  .ind-tabs .tabs--chips {
    margin-inline: 0;
  }

  .ind-tabs .tabs__list {
    padding-inline: var(--gutter);
  }

  .ind-tabs .tabs__tab {
    --slice: linear-gradient(90deg, #86C2F7, #9BA7FF);
    flex-shrink: 0;
    height: 36px;
    padding: 0 14px;
    border-color: #2E2E34;
    font-weight: 500;
    white-space: nowrap;
  }

  .ind-tabs .tabs__tab:nth-child(2) { --slice: linear-gradient(90deg, #96A8FF, #CCA0FF); }
  .ind-tabs .tabs__tab:nth-child(3) { --slice: linear-gradient(90deg, #6EE8EC, #86D4F2); }
  .ind-tabs .tabs__tab:nth-child(4) { --slice: linear-gradient(90deg, #CCA0FF, #FFA0D4); }
  .ind-tabs .tabs__tab:nth-child(5) { --slice: linear-gradient(90deg, #E9E3FF, #C9C1FF); }

  .ind-tabs .tabs__tab[aria-selected="true"] {
    border-color: transparent;
    background: linear-gradient(var(--color-charcoal), var(--color-charcoal)) padding-box, var(--slice) border-box;
  }

  .ind__item {
    display: flex;
    flex-direction: column;
    grid-row: 2;
    grid-column: 1;
    border-bottom: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 0s linear 200ms;
  }

  .ind__item.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 200ms ease;
  }

  .ind__blurb {
    display: block;
    margin-top: 16px;
    font-size: 15px;
    line-height: 22px;
    color: var(--color-text-muted);
  }

  .ind__slot,
  .ind__slot[hidden] {
    display: flex;
    flex: 1;
    margin-top: 16px;
    padding-bottom: 0;
  }

  .ind__see {
    display: block;
    margin-top: 8px;
    font-size: 16px;
    line-height: 26px;
  }

  .ind-panel {
    height: auto;
    min-height: 542px;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
  }

  .home-industries .ind-panel {
    flex: 1;
    min-width: 0;
    min-height: 0;
  }

  /* Request, answer and the results, kept short: Legal's counts, the letter's opening and
     closing lines and the chart's title row stay on wider screens and on the industry pages. */
  .home-industries .ind-tiles,
  .home-industries .ind-letter > p:first-of-type,
  .home-industries .ind-letter > p:last-of-type {
    display: none;
  }

  .home-industries .ind-chart__svg--phone {
    margin-top: -44px;
  }

  .home-industries .ind-table__row {
    min-height: 36px;
  }

  .ind-panel__header {
    height: 44px;
    padding: 0 16px;
  }

  .ind-panel__body {
    padding: 20px 18px 22px;
  }

  .ind-panel__q p {
    max-width: 90%;
  }

  .ind-panel__body .gem-panel__work,
  .ind-panel__a {
    margin-top: 12px;
  }

  .ind-table {
    margin-top: 20px;
  }

  .ind-table__head {
    height: 30px;
    font-size: 10px;
    line-height: 13px;
  }

  .ind-table__row,
  .ind-table--legal .ind-table__row {
    min-height: 40px;
    font-size: 13px;
    line-height: 18px;
  }

  .ind-table__mid {
    font-size: 12px;
    line-height: 16px;
  }

  .ind-table__tag {
    font-size: 11px;
    line-height: 14px;
  }

  .ind-cols--health { --ind-cols: minmax(0, 1fr) 76px 60px; }
  .ind-cols--education,
  .ind-cols--finance { --ind-cols: minmax(0, 1fr) 72px 64px; }
  .ind-cols--legal { --ind-cols: minmax(0, 1fr) 120px; }

  .ind-table--legal {
    margin-top: 16px;
  }

  .ind-table--legal .ind-table__head > :nth-child(2),
  .ind-table--legal td.ind-table__mid {
    display: none;
  }

  .ind-tiles {
    gap: 8px;
    margin-top: 20px;
  }

  .ind-tile {
    padding: 10px;
  }

  .ind-tile__label {
    font-size: 10px;
    line-height: 13px;
    letter-spacing: 0.06em;
  }

  .ind-tile__value {
    margin-top: 6px;
    font-size: 20px;
  }

  .ind-chart {
    margin-top: 20px;
    padding: 0;
  }

  .ind-chart__head,
  .ind-chart__svg--wide {
    display: none;
  }

  .ind-chart__svg--phone {
    display: block;
  }
}

/* Closing: the Cube photo sits low behind the section's bottom edge. */
.home-closing {
  padding-inline: 0;
  padding-bottom: 0;
}

.home-closing .closing__content {
  padding-inline: var(--gutter);
}

.home-closing .closing__actions {
  gap: 28px;
}

.home-closing .closing__media {
  height: calc(786 / 1440 * 100vw);
}

.home-closing__image {
  position: absolute;
  bottom: calc(96 / 1440 * 100vw);
  left: 0;
  width: 100%;
}

.home-closing__image img {
  width: 100%;
  height: auto;
}

/* GEM on the screen, the same as the product photos (.screen-gem in product-page.css). */
.home-closing .screen-gem {
  --gem-bg: #1c1e22;
  --gem-plane: matrix(0.96, 0.095, 0, 1, 0, 0);
  --gem-x: 61.93%;
  --gem-y: 25.69%;
  --gem-size: 1.9%;
}

/* No edge: the photo fades into the black on every side. */
.home-closing__image {
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(transparent, #000 6%, #000 94%, transparent);
  mask-composite: intersect;
}

@media (max-width: 767px) {
  .home-closing .closing__actions {
    margin-top: 32px;
  }

  .home-closing .closing__media {
    height: 450px;
  }

  .home-closing__image {
    bottom: 87px;
    left: calc(50% - 163px);
    width: 340px;
    height: 328px;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent), linear-gradient(transparent, #000 44px, #000 calc(100% - 44px), transparent);
  }

  .home-closing__image img {
    position: absolute;
    top: 0;
    left: -260px;
    width: 842px;
    max-width: none;
  }

  /* The same spot, in the 842 wide photo the frame crops. */
  .home-closing .screen-gem {
    --gem-x: 261.4px;
    --gem-y: 96.1px;
    --gem-size: 16px;
  }
}

/* The narrowest phones: the first column may wrap so the status tags stay inside. */
@media (max-width: 380px) {
  .vos-table td:first-child {
    white-space: normal;
  }

  .ind-tile {
    padding-inline: 6px;
  }
}
/* Product pages ("Alpha Cube", "Alpha Cube Pro" and "Alpha Cube Ion", desktop and mobile).
   Motion from "Motion prototypes/alpha-cube-tiles.html", "alpha-cube-pro-tiles.html" and
   "alpha-cube-ion-tiles.html"; product.js plays it. */

.pd-hero,
.pd-glance {
  --pd-inset: max(var(--gutter), calc((100% - var(--content)) / 2));
}

/* Hero, the same on all three: 780 tall with the header. Headline and buttons on the left,
   the Cube on the right, centered 300px right of the page's center. Alpha Cube Ion's header
   sits over its section, the other two sit above theirs, so their sections are 80px shorter. */
.pd-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 700px;
  overflow: hidden;
  padding: 244px var(--pd-inset) 0;
  background: var(--color-black);
}

.pd-hero__image {
  position: absolute;
  top: 90px;
  left: calc(50% + 11px);
  width: min(578px, calc(50vw - 11px));
  aspect-ratio: 578 / 520;
}

.pd-hero__image img {
  width: 100%;
  height: 100%;
}

.pd-hero__title {
  position: relative;
  z-index: 1;
  max-width: calc(50% + 11px);
  font-size: var(--hero-title-size);
  line-height: var(--hero-title-line);
  font-weight: 650;
  letter-spacing: -0.015em;
}

/* The model name always has its own line; the rest of the headline wraps on its own. */
.pd-hero__model {
  display: block;
}

.pd-hero__actions {
  position: relative;
  z-index: 1;
  gap: 28px;
  height: 38px;
  margin-top: 36px;
}

/* Alpha Cube Ion: its own wider photo, with the smaller Cube built into it. */
.pd-hero--ion {
  height: 780px;
  padding-top: 324px;
}

.pd-hero--ion .pd-hero__image {
  top: 105px;
  left: calc(50% - 699px);
  width: 1440px;
  height: 620px;
  aspect-ratio: auto;
}

/* Below the desktop header everything stacks and centers (the phone layout). */
@media (max-width: 1023px) {
  .pd-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    padding: 48px 16px;
    text-align: center;
  }

  .pd-hero__title {
    max-width: none;
  }

  .pd-hero__actions {
    height: auto;
  }

  /* Headline, buttons, then the Cube, the same on all three. Each photo has its own space
     above the Cube, so these margins leave the same gap under the buttons. */
  .pd-hero__image {
    position: relative;
    top: auto;
    left: auto;
    order: 1;
    width: min(578px, 100%);
    height: auto;
    aspect-ratio: 578 / 520;
    margin-top: 12px;
  }

  .pd-hero--pro .pd-hero__image {
    margin-top: 16px;
  }

  .pd-hero__actions {
    margin-top: 28px;
  }

  .pd-hero--ion {
    height: auto;
    padding: calc(var(--header-h) + 48px) 0 18px;
  }

  .pd-hero--ion .pd-hero__image {
    top: auto;
    left: auto;
    width: clamp(390px, 100%, 585px);
    height: auto;
    aspect-ratio: 390 / 340;
    margin-top: -8px;
  }
}

@media (max-width: 767px) {
  .pd-hero__title {
    width: min(326px, 100%);
    letter-spacing: -0.02em;
  }

  .pd-hero__image {
    width: min(358px, 100%);
    aspect-ratio: 358 / 322;
  }
}

/* GEM turning on the Cube's screen, over the still one in the photo, in the large hero and
   closing photos. Positions are shares of each photo, so it stays on the screen at every size.
   The plane leans it with the screen in the three-quarter photos. product.js adds the pieces,
   so with reduced motion the photo's own GEM simply stays. */
.screen-gem {
  --gem-bg: #040407;
  --gem-plane: scale(1);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.screen-gem__cover,
.screen-gem__gem {
  position: absolute;
  top: var(--gem-y);
  left: var(--gem-x);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) var(--gem-plane);
}

.screen-gem__cover {
  width: calc(var(--gem-size) * 1.28);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--gem-bg) 80%, transparent 100%);
}

.screen-gem__gem {
  width: var(--gem-size);
}

.screen-gem__gem canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.pd-hero--cube .screen-gem {
  --gem-bg: #1a1e22;
  --gem-plane: matrix(0.92, 0.11, 0, 1, 0, 0);
  --gem-x: 76.35%;
  --gem-y: 28%;
  --gem-size: 4.2%;
}

.pd-hero--pro .screen-gem {
  --gem-plane: matrix(0.97, -0.065, 0, 1, 0, 0);
  --gem-x: 61.74%;
  --gem-y: 24.09%;
  --gem-size: 4.85%;
}

.pd-hero--ion .screen-gem {
  --gem-plane: matrix(0.99, -0.05, 0, 1, 0, 0);
  --gem-x: 72.905%;
  --gem-y: 37.796%;
  --gem-size: 1.7%;
}

.pd-closing--cube .screen-gem,
.pd-closing--pro .screen-gem {
  --gem-bg: #000001;
  --gem-x: 63.035%;
  --gem-y: 29.97%;
  --gem-size: 2.85%;
}

.pd-closing--ion .screen-gem {
  --gem-bg: #010000;
  --gem-x: 59.924%;
  --gem-y: 43.966%;
  --gem-size: 2.65%;
}

/* The narrower layouts use their own Alpha Cube Ion photo. */
@media (max-width: 1023px) {
  .pd-hero--ion .screen-gem {
    --gem-x: 58.932%;
    --gem-y: 31.569%;
    --gem-size: 4.4%;
  }
}

/* At a glance: the tile row runs off the right edge, then the security block. */
.pd-glance {
  padding: 76px 0 var(--link-edge);
  overflow: hidden;
  background: var(--color-charcoal);
}

.pd-glance__title {
  padding-inline: var(--pd-inset);
}

.pd-glance .carousel {
  margin-top: 48px;
}

.pd-tile-photo {
  position: absolute;
  inset: 0;
}

.pd-tile-photo img {
  width: 100%;
  height: 100%;
}

.pd-tile-photo--plug {
  inset: 12px auto auto -336px;
  width: 907px;
  height: 696px;
}

.pd-tile-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(in oklab 180deg, #040407 0%, #040407 2%, #04040700 16%, #04040700 66%, #040407 84%, #040407 100%);
}

.pd-tile-fade--ion {
  display: none;
}

.pd-capacity {
  position: absolute;
  top: 255px;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 207px;
}

.pd-capacity--high {
  top: 191px;
}

/* The display's GEM. Sized for the 560 x 640 tile and scaled down with it on phones. The
   dark circle covers the GEM in the photo, only once the live one is running. */
.pd-display {
  position: absolute;
  top: 0;
  left: 0;
  width: 560px;
  height: 640px;
  transform-origin: 0 0;
  pointer-events: none;
}

/* Alpha Cube: its display is photographed at an angle, so its GEM sits on a plane fitted
   to the screen's corners, from alpha-cube-tiles.html. */
.pd-display__plane {
  position: absolute;
  top: 0;
  left: 0;
  width: 800px;
  height: 560px;
  transform: matrix3d(0.26910553, -0.011621051, 0, -0.00013857102, 0.0025044063, 0.30280929, 0, -1.9526127e-06, 0, 0, 1, 0, 72.197517, 270.21683, 0, 1);
  transform-origin: 0 0;
}

.pd-gem {
  position: absolute;
}

.pd-gem canvas {
  filter: drop-shadow(0 0 3px rgb(204 160 255 / 55%)) drop-shadow(0 0 8px rgb(150 168 255 / 25%));
}

.pd-gem.is-live::before {
  content: "";
  position: absolute;
  inset: var(--blot-inset, -9px);
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--blot) 80%, transparent 100%);
}

.pd-gem--cube {
  --blot: #040407;
  --blot-inset: -30px;
  top: 105px;
  left: 284.6px;
  width: 250px;
  height: 250px;
}

.pd-gem--cube canvas {
  filter: drop-shadow(0 0 9px rgb(204 160 255 / 55%)) drop-shadow(0 0 24px rgb(150 168 255 / 25%));
}

.pd-gem--pro {
  --blot: #040406;
  --blot-inset: -12px -14px;
  top: 248.8px;
  left: 222px;
  width: 84px;
  height: 84px;
}

.pd-gem--ion {
  --blot: #000;
  --blot-inset: -21px;
  top: 413.4px;
  left: 208.6px;
  width: 78px;
  height: 78px;
}

/* The $0 meter. */
.pd-meter {
  position: absolute;
  top: 66px;
  right: 44px;
  left: 44px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.pd-meter--low {
  top: 160px;
}

.pd-meter__summary {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pd-meter__zero {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding-top: 6px;
  font-size: 112px;
  line-height: 112px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.pd-meter__dollar {
  padding: 5px 4px 0 0;
  font-size: 67px;
  line-height: 67px;
}

.pd-meter__tokens {
  padding-top: 12px;
  font-size: 20px;
  line-height: 26px;
}

.pd-meter__count {
  font-weight: 600;
  color: #96a8ff;
}

.pd-meter__jobs {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: 26px;
  border-top: 1px solid #232328;
}

.pd-meter__job {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
  line-height: 20px;
  color: #d4d4d8;
}

.pd-meter__track {
  display: block;
  height: 12px;
  overflow: hidden;
  border-radius: 6px;
  background: #1c1c22;
}

.pd-meter__fill {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: #96a8ff;
}

/* VaultShield: ten checks around the shield. */
.pd-shield {
  position: absolute;
  top: 212px;
  left: 115px;
  width: 330px;
  height: 330px;
}

.pd-shield--high {
  top: 98px;
}

.pd-shield svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pd-agent line {
  stroke: #48484f;
  stroke-opacity: 0.2;
}

.pd-agent__ring {
  fill: #040407;
  stroke: #48484f;
  stroke-width: 2;
}

.pd-agent__dot {
  fill: var(--model);
  opacity: 0;
}

.pd-agent__check {
  stroke: #34d399;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}

.pd-agent[data-state="running"] line {
  stroke: var(--model);
  stroke-opacity: 0.4;
  stroke-dasharray: 3 4;
  transition: stroke 300ms ease, stroke-opacity 300ms ease;
}

.pd-agent[data-state="running"] .pd-agent__ring {
  fill: color-mix(in srgb, var(--model) 12%, transparent);
  stroke: var(--model);
}

.pd-agent[data-state="running"] .pd-agent__dot {
  opacity: 1;
  transition: opacity 300ms ease;
}

.pd-agent[data-state="done"] line {
  stroke: #34d399;
  stroke-opacity: 0.4;
}

.pd-agent[data-state="done"] .pd-agent__ring {
  stroke: #34d399;
}

.pd-agent[data-state="done"] .pd-agent__check {
  opacity: 1;
}

/* Security block: four black tiles, number and red icon at the top left. */
.pd-security {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: 120px var(--gutter) 0;
}

.pd-security__tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 48px;
}

.pd-security__tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 230px;
  padding: 28px;
  border-radius: var(--radius-card);
  background: var(--color-black);
}

.pd-security__tile p {
  font-size: 24px;
  line-height: 31px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pd-security__mark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono-label);
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-quiet);
}

.pd-security__more {
  margin-top: var(--link-gap);
  font-size: 16px;
  line-height: 26px;
}

@media (max-width: 1279px) {
  .pd-security__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Power: statement headline, the photo on the two larger models, the spec lines. */
.pd-power__photo {
  width: min(620px, 100%);
  aspect-ratio: 1;
  margin: 56px auto 0;
  overflow: hidden;
  mask-image: radial-gradient(72% 72%, rgb(0 0 0) 60%, transparent 100%);
}

.pd-power__photo-inner {
  position: relative;
  left: -12.42%;
  top: -5.645%;
  width: 125%;
}

.pd-power__photo-inner img {
  width: 100%;
  height: auto;
}

.pd-specs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
}

.pd-specs--no-photo {
  margin-top: 56px;
}

.pd-spec {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 10px;
  max-width: 100%;
  font-size: 36px;
  line-height: 43px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--spec-text);
}

.pd-spec__value {
  color: var(--model);
}

.pd-power,
.pd-lineup {
  padding-bottom: var(--link-edge);
}

.pd-power__more {
  margin-top: var(--link-gap);
  font-size: 16px;
  line-height: 26px;
}

/* One line of running text, so the count stays with the GPU name and the line wraps on its own. */
@media (max-width: 1023px) {
  .pd-spec {
    display: block;
    text-align: center;
  }
}

/* The shared lineup. */
.pd-lineup__cards {
  margin-top: 64px;
}

.pd-lineup__compare {
  height: 27px;
  margin-top: var(--link-gap);
  font-size: 16px;
  line-height: 26px;
}

@media (max-width: 1023px) {
  .pd-lineup__cards {
    gap: 16px;
  }
}

/* Closing: the model's photo sits low behind the headline, in one shared frame. */
.pd-closing {
  padding-inline: 0;
  padding-bottom: 0;
}

.pd-closing .closing__content {
  padding-inline: var(--gutter);
}

.pd-closing .closing__actions {
  gap: 28px;
}

.pd-closing .closing__media {
  position: static;
  height: 817px;
}

.pd-closing--ion .closing__media {
  height: 721px;
}

.pd-closing__image {
  position: absolute;
  bottom: 5px;
  left: calc(50% - 556.5px);
  width: 1113px;
  height: 872px;
}

.pd-closing__image img {
  width: 100%;
  height: 100%;
}

/* Phones. */
@media (max-width: 767px) {
  .pd-glance {
    padding: 48px 0 var(--link-edge);
  }

  .pd-glance .carousel {
    margin-top: 32px;
  }

  .pd-tile-photo--plug {
    inset: 7px auto auto -199px;
    width: 538px;
    height: 413px;
  }

  .pd-tile-fade--ion {
    display: block;
    background: linear-gradient(in oklab 180deg, #040407 0%, #040407 22%, #04040700 34%, #04040700 100%);
  }

  .pd-capacity {
    top: 146px;
    height: 132px;
  }

  .pd-capacity--high {
    top: 108px;
  }

  .pd-display {
    transform: scale(0.59286);
  }

  .pd-meter {
    top: 41px;
    right: 26px;
    left: 26px;
    gap: 14px;
  }

  .pd-meter--low {
    top: 111px;
  }

  .pd-meter__zero {
    padding-top: 4px;
    font-size: 60px;
    line-height: 60px;
  }

  .pd-meter__dollar {
    padding: 2.5px 2px 0 0;
    font-size: 36px;
    line-height: 36px;
  }

  .pd-meter__jobs {
    gap: 8px;
    padding-top: 14px;
  }

  .pd-meter__job {
    gap: 6px;
    font-size: 12px;
    line-height: 16px;
  }

  .pd-meter__track {
    height: 8px;
    border-radius: 4px;
  }

  .pd-meter__fill {
    border-radius: 4px;
  }

  .pd-shield {
    top: 132px;
    left: 68px;
    width: 196px;
    height: 196px;
  }

  .pd-shield--high {
    top: 50px;
  }

  .pd-security {
    padding: 72px 20px 0;
  }

  .pd-security__tiles {
    gap: 12px;
    margin-top: 32px;
  }

  .pd-security__tile {
    height: 150px;
    padding: 20px;
  }

  .pd-security__tile p {
    font-size: 16px;
    line-height: 22px;
  }

  .pd-power__photo {
    width: min(326px, 100%);
    margin-top: 32px;
  }

  .pd-specs,
  .pd-specs--no-photo {
    gap: 10px;
    margin-top: 32px;
  }

  .pd-spec {
    column-gap: 5px;
    max-width: 326px;
    font-size: 18px;
    line-height: 26px;
    letter-spacing: 0;
  }

  .pd-spec__value--no-calt {
    font-feature-settings: "calt" 0;
  }

  .pd-lineup__cards {
    margin-top: 48px;
  }

  .pd-lineup__compare {
    height: 26px;
  }

  .pd-closing .closing__actions {
    margin-top: 32px;
  }

  .pd-closing .closing__media {
    height: 453px;
  }

  .pd-closing--ion .closing__media {
    height: 384px;
  }

  .pd-closing__image {
    bottom: -12px;
    left: calc(50% - 317px);
    width: 634px;
    height: 497px;
  }
}
/* The Compare page (Paper "Compare · Desktop", "Compare · Mobile"). The model columns and
   the sticky bar are shared parts in product.css. */

.compare-hero {
  padding: 72px var(--gutter) 96px;
  background: var(--color-black);
  text-align: center;
}

.compare-hero .compare-heads {
  margin-top: 48px;
}

/* Spec table: charcoal, each group's heading on the left over three centered columns
   lined up with the model columns above. A jump to #specs stops clear of the sticky bar. */
.compare-specs {
  display: flex;
  flex-direction: column;
  gap: 56px;
  padding: 48px var(--gutter) 112px;
  background: var(--color-charcoal);
  scroll-margin-top: 72px;
}

.spec-group + .spec-group {
  padding-top: 28px;
  border-top: 1px solid var(--color-line);
}

.spec-group__title {
  font-size: 24px;
  line-height: 30px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.spec-group__rows {
  max-width: 1056px;
  margin: 36px auto 0;
}

/* A real table, so a screen reader can follow each model down its column. The spacing
   between cells is the 12px gap between columns; the negative margin drops its outer edge. */
.spec-table {
  width: calc(100% + 24px);
  margin-inline: -12px;
  border-collapse: separate;
  border-spacing: 12px 0;
  table-layout: fixed;
}

.spec-table th {
  height: 0;
  padding: 0;
}

.spec-table td {
  padding: 0;
  text-align: center;
  vertical-align: top;
}

.spec-table tr + tr td {
  padding-top: 36px;
}

.spec-cell__value {
  display: block;
  font-size: 28px;
  line-height: 34px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.spec-cell__label {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 22px;
  color: var(--color-text-muted);
}

.spec-table .gem-mark {
  display: block;
  margin-inline: auto;
}

.spec-table .gem-mark + .spec-cell__value {
  margin-top: 10px;
}

.spec-cell__icon {
  display: block;
  margin-inline: auto;
}

.spec-cell__icon + .spec-cell__label {
  margin-top: 6px;
}

.compare-closing {
  padding: 120px var(--gutter) 128px;
}

/* Between the Paper sizes: a narrower inset so the model names stay on one line. */
@media (min-width: 768px) and (max-width: 1023px) {
  .compare-hero,
  .compare-specs {
    padding-inline: 24px;
  }

  .compare-hero h1,
  .spec-cell__value {
    text-wrap: balance;
  }
}

/* Phones: everything sits in the same 326px column as the model columns and the bar. */
@media (max-width: 767px) {
  .compare-hero {
    padding: 48px max(0px, min(32px, calc((100vw - 326px) / 2))) 56px;
  }

  .compare-hero .compare-heads {
    margin-top: 32px;
  }

  .compare-specs {
    align-items: center;
    gap: 40px;
    padding: 32px max(0px, min(32px, calc((100vw - 326px) / 2))) 64px;
    scroll-margin-top: 104px;
  }

  .spec-group {
    width: 326px;
  }

  .spec-group + .spec-group {
    padding-top: 40px;
  }

  .spec-group__title {
    font-size: 20px;
    line-height: 26px;
  }

  .spec-group__rows {
    margin-top: 24px;
  }

  .spec-table {
    width: calc(100% + 32px);
    margin-inline: -16px;
    border-spacing: 16px 0;
  }

  .spec-table tr + tr td {
    padding-top: 28px;
  }

  .spec-cell__value {
    font-size: 17px;
    line-height: 22px;
    letter-spacing: 0;
  }

  .spec-cell__label {
    margin-top: 2px;
    font-size: 12px;
    line-height: 16px;
    text-wrap: balance;
  }

  .spec-table .gem-mark {
    width: 36px;
    height: 36px;
  }

  .spec-cell__icon {
    width: 24px;
    height: 24px;
  }

  .compare-closing {
    padding: 64px var(--gutter) 72px;
  }

  .compare-closing .closing__sub {
    margin-top: 22px;
  }

  /* Narrower than the 326 column: an 8px margin, and the table's columns share the width. */
  @media (max-width: 357px) {
    .compare-hero {
      padding-inline: 8px;
    }

    .compare-specs {
      padding-inline: 8px;
    }

    .spec-group {
      width: 100%;
    }

    .spec-table {
      width: calc(100% + 12px);
      margin-inline: -6px;
      border-spacing: 6px 0;
    }
  }
}
/* VaultShield section, shared by The Vault System and Security. Paper: "Reference · The
   Vault System VaultShield" and its mobile version. One set of pieces, two layouts:
   a row per file from 1184px up, a card per file below that. vaultshield.js plays it. */

.vshield {
  --vshield-red: #e72a52;
  --n1: 22.917%;
  --n2: 50%;
  --n3: 77.083%;
  height: 598px;
}

.vshield .small-head__sub {
  max-width: 1000px;
}

.rule-section > .vshield__head {
  padding-top: 64px;
}

.vshield__stage {
  width: 1120px;
  margin: 50px auto 0;
}

.vshield__mark,
.vshield__labels {
  position: relative;
  width: 480px;
  margin-left: 290px;
}

.vshield__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 23px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.14em;
}

.vshield__labels {
  height: 14px;
  margin-top: 11px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.12em;
  color: var(--color-text-quiet);
}

.vshield__labels span {
  position: absolute;
  top: 0;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

.vshield__labels span:nth-child(1) {
  left: var(--n1);
}

.vshield__labels span:nth-child(2) {
  left: var(--n2);
}

.vshield__labels span:nth-child(3) {
  left: var(--n3);
}

.vshield__lanes {
  display: grid;
  gap: 18px;
  margin-top: 20px;
}

.vshield__lane {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr) 350px;
  height: 64px;
}

.vshield__file,
.vshield__result {
  position: relative;
  z-index: 1;
  border: 1px solid var(--color-line-soft);
  border-radius: 13px;
  background: var(--color-panel);
}

.vshield__file {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
}

.vshield__doc {
  flex: none;
  width: 16px;
  height: 20px;
}

.vshield__names {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.vshield__name {
  font-size: 16px;
  line-height: 20px;
}

.vshield__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  color: var(--color-text-quiet);
}

.vshield__lane--caught .vshield__file > * {
  opacity: 0.48;
}

.vshield__track {
  position: relative;
}

.vshield__line {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  margin-top: -1px;
  overflow: visible;
  stroke: #6e6d76;
  stroke-opacity: 0.85;
  stroke-width: 1.25;
}

.vshield__lane--caught .vshield__line {
  width: var(--n3);
}

.vshield__lane--caught .vshield__line--post {
  left: var(--n3);
  width: calc(100% - var(--n3));
  stroke-opacity: 0.25;
}

.vshield__dot {
  position: absolute;
  top: 50%;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text);
  transform: translate(-50%, -50%);
}

.vshield__dot--end {
  left: 100%;
}

.vshield__lane--caught .vshield__dot--end {
  opacity: 0.4;
}

.vshield__node {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-line-soft);
  border-radius: 50%;
  background: var(--color-panel);
  transform: translate(-50%, -50%);
}

.vshield__node:nth-of-type(1) {
  left: var(--n1);
}

.vshield__node:nth-of-type(2) {
  left: var(--n2);
}

.vshield__node:nth-of-type(3) {
  left: var(--n3);
}

.vshield__idle {
  position: absolute;
  display: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid #3a3a42;
  border-radius: 50%;
}

.vshield__spin {
  border-top-color: var(--color-text);
}

.vshield__check {
  position: absolute;
  width: 18px;
  height: 18px;
  stroke: var(--color-text-panel);
}

.vshield__check--x {
  stroke: var(--vshield-red);
}

.vshield__check circle {
  stroke-width: 1.2;
}

.vshield__check path {
  stroke-width: 1.5;
}

.vshield__result {
  display: flex;
  align-items: center;
  padding: 0 22px;
}

.vshield__lane--caught .vshield__result {
  border-color: var(--vshield-red);
}

.vshield__result-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.vshield__ok {
  flex: none;
  width: 26px;
  height: 26px;
  stroke: #34d399;
}

.vshield__ok circle {
  stroke-width: 1;
}

.vshield__ok path {
  stroke-width: 1.3;
}

.vshield__lock {
  flex: none;
  width: 30px;
  height: 35px;
  stroke: var(--vshield-red);
  stroke-width: 3.4;
}

/* Cards: below the width where the row fits. */
@media (max-width: 1183px) {
  .vshield {
    --n1: 20.69%;
    --n3: 79.31%;
    height: auto;
    padding-bottom: 64px;
  }

  .rule-section > .vshield__head {
    padding-top: 48px;
  }

  .vshield__stage {
    width: auto;
    max-width: 560px;
    margin-top: 32px;
  }

  .vshield__mark {
    width: auto;
    margin-left: 0;
  }

  .vshield__labels {
    width: auto;
    height: 28px;
    margin: 16px 18px 0;
    font-size: 10px;
  }

  .vshield__labels span {
    width: min-content;
    white-space: normal;
  }

  .vshield__lanes {
    gap: 12px;
    margin-top: 10px;
  }

  .vshield__lane {
    display: block;
    height: auto;
    padding-bottom: 16px;
    border: 1px solid var(--color-line-soft);
    border-radius: 14px;
    background: var(--color-panel);
  }

  .vshield__lane--caught {
    border-color: var(--vshield-red);
  }

  .vshield__file,
  .vshield__result {
    border: 0;
    border-radius: 0;
    background: none;
  }

  .vshield__file {
    gap: 10px;
    margin: 15px 17px 0;
    padding: 0;
  }

  .vshield__lane--caught .vshield__file > * {
    opacity: 1;
  }

  .vshield__lane--caught .vshield__file {
    opacity: 0.48;
  }

  .vshield__doc {
    width: 14px;
    height: 18px;
  }

  .vshield__file .vshield__names {
    flex-direction: row;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .vshield__name {
    font-size: 15px;
  }

  .vshield__track {
    height: 40px;
    margin: 12px 17px 0;
  }

  .vshield__node {
    width: 32px;
    height: 32px;
  }

  .vshield__idle {
    width: 14px;
    height: 14px;
  }

  .vshield__check {
    width: 16px;
    height: 16px;
  }

  .vshield__result {
    min-height: 55px;
    margin: 12px 17px 0;
    padding: 14px 0 0;
    border-top: 1px solid rgb(79 79 86 / 25%);
    border-radius: 0;
  }

  .vshield__lane--caught .vshield__result {
    border-color: rgb(79 79 86 / 25%);
  }

  .vshield__result-inner {
    gap: 14px;
  }

  .vshield__result .vshield__names {
    gap: 3px;
  }

  .vshield__ok {
    width: 22px;
    height: 22px;
  }

  .vshield__lock {
    width: 22px;
    height: 26px;
    stroke-width: 4.2;
  }
}

@media (max-width: 767px) {
  .vshield__stage {
    margin-inline: var(--small-inset);
  }
}
/* The Vault System ("The Vault System", "The Vault System · Mobile", "Reference · VaultOS
   screens"). The whole page is black. Motion from "Motion prototypes/vault-system-*.html";
   system.js plays it. */

.sys-hero__title {
  position: absolute;
  max-width: none;
  top: 226px;
  left: 0;
  width: 100%;
  padding-inline: var(--gutter);
  text-align: center;
}

/* Shorter on desktop, so part of the Cube below shows on landing at 1440 x 900. */
@media (min-width: 1024px) {
  .light-hero.sys-hero {
    height: 400px;
  }
}

/* Complete out of the box: runs over the hero's light. */
.sys-one {
  --small-inset: max(var(--gutter), calc((100% - var(--content)) / 2));
  position: relative;
  height: 742px;
  padding-top: 64px;
}

/* Everything hangs off the page's center line, so nothing pushes past narrower screens. */
.sys-one__stage {
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
}

.sys-one__photo {
  position: absolute;
  top: 246px;
  left: -470px;
  width: 460px;
  aspect-ratio: 1550 / 1400;
}

.sys-one__photo img {
  display: block;
  width: 100%;
  height: 100%;
}

/* GEM on the Cube's display, over the still one in the photo: 953, 304 in the 1550 x 1400 photo. */
.sys-one__cover,
.sys-one__gem {
  position: absolute;
  top: 21.71%;
  left: 61.48%;
  transform: translate(-50%, -50%);
}

.sys-one__cover {
  width: 6.957%;
  height: 6.739%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #000 78%, rgb(0 0 0 / 0%) 100%);
}

.sys-one__gem {
  width: 3.913%;
  aspect-ratio: 1;
}

.sys-one__gem canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.sys-one__list {
  position: absolute;
  top: 269.8px;
  left: 80px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  width: max-content;
}

.sys-one__rail {
  position: absolute;
  top: 14px;
  bottom: 42px;
  left: 2.875px;
  width: 1.25px;
  background: #6e6d76;
  transform-origin: top;
}

.sys-one__item {
  position: relative;
  padding-left: 36px;
}

.sys-one__dot {
  position: absolute;
  top: 10.5px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text);
}

.sys-one__item h3 {
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.sys-one__item p {
  margin-top: 4px;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-quiet);
}

/* VaultOS */
.sys-vos .small-head__sub,
.sys-gem .small-head__sub {
  max-width: 1000px;
}

/* The last three words stay together, so a long sub never ends on a short line. */
.small-head__keep {
  white-space: nowrap;
}

/* Too many lines on a phone for balance, which browsers stop applying after a few. */
@media (max-width: 767px) {
  .sys-vos .small-head__sub,
  .sys-gem .small-head__sub {
    text-wrap: pretty;
  }
}

.sys-vos__inner {
  max-width: var(--content);
  margin-inline: auto;
  padding: 80px var(--gutter) 80px;
  box-sizing: content-box;
}

.sv-tiles {
  display: flex;
  gap: 16px;
}

.sv-tile {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--color-line-soft);
  border-radius: 12px;
  background: var(--color-panel);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Active: the cool gradient border and a faint tint, fading between tiles. */
.sv-tile::before,
.sv-tile::after {
  content: "";
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms;
}

.sv-tile::before {
  inset: -1px;
  padding: 1px;
  border-radius: 12px;
  background: linear-gradient(90deg, var(--gem-cool-from), var(--gem-cool-to));
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
}

.sv-tile::after {
  inset: 0;
  border-radius: 11px;
  background: rgb(204 160 255 / 6%);
}

.sv-tile.is-on::before,
.sv-tile.is-on::after {
  opacity: 1;
}

.sv-tile__name,
.sv-tile__text {
  position: relative;
  display: block;
  z-index: 1;
}

.sv-tile__name {
  font-size: 15px;
  line-height: 21px;
  font-weight: 600;
}

.sv-tile__text {
  margin-top: 2px;
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text-muted);
}

.sv-dots {
  display: none;
}

/* The VaultOS window. Line heights are the font's own, as in the prototype and Paper. */
.sv-win {
  line-height: normal;
}

.sv-win--desktop {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  margin-top: 25px;
}

.sv-win--phone {
  display: none;
  height: 540px;
  margin-top: 20px;
  border-radius: 14px;
}

.sv-win .vos-tag {
  display: inline-block;
}

.sv-gem {
  flex: none;
}

.sv-clip {
  height: 62px;
  overflow: hidden;
}

.sv-win--phone .sv-clip {
  height: 70px;
}

.sv-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 16px 22px;
  border-right: 1px solid #232328;
  background: var(--color-charcoal);
}

.sv-side__top {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 4px 0 10px;
}

.sv-side__new {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  margin-top: 14px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 14px;
  color: #e4e4ea;
}

.sv-side__new i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #26262b;
  font-style: normal;
  color: #a0a0a8;
}

.sv-side__nav {
  margin-top: 8px;
}

.sv-side__item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 14px;
  color: #e4e4ea;
  transition: background-color 350ms;
}

.sv-side__item.is-on {
  background: #1f1f25;
  color: var(--color-text);
}

.sv-side__label {
  margin: 22px 10px 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-text-quiet);
}

.sv-side__clip {
  height: 64px;
  overflow: hidden;
}

.sv-side__clip[hidden] {
  display: none;
}

.sv-side__job {
  padding: 8px 10px 9px;
  border-radius: 8px;
  font-size: 14px;
  color: #e4e4ea;
}

.sv-side__bar {
  height: 3px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 2px;
  background: #26262b;
}

.sv-side__bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--gem-1);
}

.sv-side__meta {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-quiet);
}

.sv-side__recent {
  padding: 8px 10px;
  overflow: hidden;
  border-radius: 8px;
  font-size: 14px;
  color: #c9c9d1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sv-side__account {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: auto -16px 0;
  padding: 14px 6px 0 22px;
  border-top: 1px solid #232328;
  font-size: 14px;
  color: #e4e4ea;
}

.sv-side__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #26262b;
}

.sv-main {
  position: relative;
  min-width: 0;
}

.sv-view {
  position: absolute;
  inset: 0;
}

.sv-view[hidden] {
  display: none;
}

.sv-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px 0 28px;
  border-bottom: 1px solid #1d1d22;
}

.sv-top__title {
  font-size: 15px;
  font-weight: 500;
}

.sv-top__btn {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #2a2a30;
  border-radius: 8px;
  background: #0d0d11;
  font-size: 13px;
  color: #e4e4ea;
}

.sv-top__btn span {
  font-size: 15px;
  color: #a0a0a8;
}

.sv-body {
  padding: 24px 28px;
}

.sv-filters {
  display: flex;
  gap: 6px;
}

.sv-filters span {
  padding: 6px 12px;
  border: 1px solid #232328;
  border-radius: 7px;
  font-size: 13px;
  color: #a0a0a8;
}

.sv-filters span.is-on {
  border-color: #1f1f25;
  background: #1f1f25;
  color: var(--color-text);
}

.sv-filters em {
  margin-left: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-style: normal;
  color: var(--color-text-quiet);
}

.sv-jobs {
  margin-top: 20px;
}

.sv-jobs__head,
.sv-job {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 0.8fr 1.3fr 110px;
  align-items: center;
}

.sv-jobs__head {
  padding-bottom: 10px;
  border-bottom: 1px solid #232328;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--color-text-quiet);
}

.sv-jobs__head span:last-child,
.sv-job > div:last-child {
  text-align: right;
}

.sv-job {
  height: 62px;
  border-bottom: 1px solid #1d1d22;
  font-size: 14px;
  color: #e4e4ea;
}

.sv-job small {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-quiet);
}

.sv-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #a0a0a8;
}

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

.sv-progress__bar {
  flex: 0 1 160px;
  min-width: 0;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: #1c1c22;
}

.sv-progress__bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--gem-1);
}

.sv-progress span {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #a0a0a8;
}

.sv-toast {
  position: absolute;
  right: 24px;
  bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 12px 12px;
  border: 1px solid #2a2a30;
  border-radius: 12px;
  background: #121216;
  box-shadow: 0 12px 32px -12px #000;
  font-size: 14px;
  color: #e4e4ea;
}

.sv-toast small {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-quiet);
}

.sv-models {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 28px;
}

.sv-model {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px 190px;
  align-items: center;
  height: 68px;
  padding: 0 18px;
  border: 1px solid #232328;
  border-radius: 12px;
  background: #0d0d11;
  transition: background-color 350ms, border-color 350ms;
}

.sv-model.is-on {
  border-color: #2a2a30;
  background: #1f1f25;
}

.sv-model > div:last-child {
  text-align: right;
}

.sv-model__name {
  font-size: 15px;
}

.sv-model__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--color-text-quiet);
}

.sv-model__size {
  font-family: var(--font-mono);
  font-size: 13px;
  color: #a0a0a8;
}

.sv-load {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #a0a0a8;
  white-space: nowrap;
}

.sv-load[hidden],
.sv-win [data-mm-status] [hidden] {
  display: none;
}

.sv-load__bar {
  display: block;
  width: 80px;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: #26262b;
}

.sv-load__bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--gem-1);
}

.sv-seg {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid #2a2a30;
  border-radius: 9px;
}

.sv-seg span {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: #a0a0a8;
}

.sv-seg span.is-on {
  background: #26262b;
  color: var(--color-text);
}

.sv-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 22px;
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 22px;
  color: #e4e4ea;
}

.sv-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.sv-kpi {
  padding: 16px 18px;
  border: 1px solid #232328;
  border-radius: 12px;
  background: #0d0d11;
}

.sv-kpi small {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 13px;
  color: var(--color-text-quiet);
}

.sv-kpi small span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: #7a7a81;
}

.sv-kpi b {
  display: block;
  margin-top: 6px;
  font-size: 30px;
  line-height: 36px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sv-kpi em,
.sv-pkpi em {
  display: block;
  font-size: 12px;
  font-style: normal;
  color: #7fddb4;
  margin-top: 4px;
}

.sv-kpi em.is-plain,
.sv-pkpi em.is-plain {
  color: var(--color-text-quiet);
}

.sv-cards {
  display: grid;
  grid-template-columns: minmax(0, 494fr) minmax(0, 488fr);
  gap: 12px;
  margin-top: 12px;
}

.sv-card {
  padding: 18px 20px;
  border: 1px solid #232328;
  border-radius: 12px;
  background: #0d0d11;
}

.sv-card--models {
  margin-top: 12px;
}

.sv-card__head,
.sv-pcard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sv-card__head h4 {
  font-size: 14px;
  font-weight: 500;
}

.sv-card__head span {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-quiet);
}

.sv-chart {
  position: relative;
  height: 210px;
  margin-top: 16px;
}

.sv-chart__grid,
.sv-chart__line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sv-chart__grid line,
.sys-loss__grid line {
  stroke: #1d1d22;
  vector-effect: non-scaling-stroke;
}

.sv-chart__line {
  --reveal: 1;
  clip-path: inset(-8px calc((1 - var(--reveal)) * 100%) -8px -8px);
}

.sv-chart__line path {
  fill: none;
  stroke: var(--gem-cool-from);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.sv-chart__y {
  position: absolute;
  left: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: #7a7a81;
}

.sv-chart__dot {
  position: absolute;
  left: calc(100% - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gem-cool-from);
  box-shadow: 0 0 0 4px #96a8ff33;
}

.sv-chart__x {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-quiet);
}

.sv-team {
  padding: 13px 0;
  border-bottom: 1px solid #1d1d22;
}

.sv-team:last-child {
  border-bottom: 0;
}

.sv-team__row,
.sv-used__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 14px;
  color: #e4e4ea;
}

.sv-team__row span,
.sv-used__row span {
  font-family: var(--font-mono);
  font-size: 12px;
  color: #a0a0a8;
}

.sv-team__row b {
  font-weight: 400;
}

.sv-team__row em {
  margin-left: 8px;
  font-style: normal;
  color: #7fddb4;
}

.sv-team__bar,
.sv-used__bar {
  height: 4px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 2px;
  background: #1c1c22;
}

.sv-team__bar i,
.sv-used__bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--gem-cool-from);
}

.sv-used__bar i {
  background: var(--gem-1);
}

.sv-used {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin-top: 14px;
}

/* Phone window. */
.sv-ptop {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 50px;
  padding: 0 12px 0 14px;
  border-bottom: 1px solid #1d1d22;
}

.sv-ptop__title {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}

.sv-ptop__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border: 1px solid #2a2a30;
  border-radius: 7px;
  background: #0d0d11;
  font-size: 12px;
  color: #e4e4ea;
}

.sv-ptop__btn span {
  color: #a0a0a8;
}

.sv-seg--phone {
  padding: 2px;
  border-radius: 8px;
}

.sv-seg--phone span {
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 12px;
}

.sv-pbody {
  padding: 12px 14px;
}

.sv-pjob {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid #1d1d22;
}

.sv-pjob.is-last {
  border-bottom: 0;
}

.sv-pjob__name {
  font-size: 14px;
}

.sv-pjob__meta {
  margin-top: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-quiet);
}

.sv-pjob__bar {
  width: 180px;
  max-width: 100%;
  height: 3px;
  margin-top: 8px;
  overflow: hidden;
  border-radius: 2px;
  background: #1c1c22;
}

.sv-pjob__bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--gem-1);
}

.sv-ptoast {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #2a2a30;
  border-radius: 12px;
  background: #121216;
  box-shadow: 0 12px 32px -12px #000;
  font-size: 13px;
  color: #e4e4ea;
}

.sv-ptoast small {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-quiet);
}

.sv-pmodels {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sv-pmodel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid #232328;
  border-radius: 10px;
  background: #0d0d11;
  transition: background-color 350ms;
}

.sv-pmodel.is-on {
  border-color: #2a2a30;
  background: #1f1f25;
}

.sv-pmodel__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 12px;
  color: var(--color-text-quiet);
}

.sv-pmodel .sv-load {
  gap: 8px;
  font-size: 10px;
}

.sv-pmodel .sv-load__bar {
  width: 48px;
  height: 3px;
}

.sv-psummary {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 38px;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 19px;
  color: #e4e4ea;
}

.sv-pkpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.sv-pkpi {
  padding: 12px 14px;
  border: 1px solid #232328;
  border-radius: 10px;
  background: #0d0d11;
}

.sv-pkpi small {
  display: block;
  font-size: 12px;
  color: var(--color-text-quiet);
}

.sv-pkpi b {
  display: block;
  margin-top: 4px;
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
}

.sv-pkpi em {
  margin-top: 2px;
  font-size: 10px;
  white-space: nowrap;
}

.sv-pcard {
  margin-top: 8px;
  padding: 14px;
  border: 1px solid #232328;
  border-radius: 10px;
  background: #0d0d11;
}

.sv-pcard__head {
  align-items: baseline;
}

.sv-pcard__head h4 {
  font-size: 13px;
  font-weight: 500;
}

.sv-pcard__head span {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-quiet);
}

.sv-chart--phone {
  width: calc(100% + 4px);
  height: 110px;
  margin-top: 12px;
}

.sv-chart--phone .sv-chart__dot {
  left: calc(100% - 4px);
  width: 8px;
  height: 8px;
  box-shadow: none;
}

.sv-pcard .sv-chart__x {
  margin-top: 6px;
  font-size: 10px;
}

/* GEM */
.sys-gem {
  padding-bottom: 80px;
}

.sys-gem__mark {
  display: flex;
  justify-content: center;
  margin-top: 80px;
  padding-inline: var(--small-inset);
}

.sys-gem__panel {
  width: calc(100% - 2 * var(--small-inset));
  height: 462px;
  margin: 28px auto 0;
  padding: 1.5px;
  overflow: clip;
}

.sys-gem__panel .gem-panel__ring {
  padding: 1.5px;
  background: conic-gradient(from var(--ring-angle), rgb(150 168 255 / 15%) 0deg, #96a8ff 50deg, #cca0ff 100deg, rgb(204 160 255 / 15%) 160deg, rgb(150 168 255 / 15%) 360deg);
}

.sys-snip {
  position: absolute;
  inset: 47.5px 1.5px 1.5px;
  opacity: 0;
}

.sys-snip.is-first {
  opacity: 1;
}

.sys-viz {
  margin-top: 24px;
}

.sys-bars {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-mono);
}

.sys-bars--narrow {
  display: none;
}

.sys-sources__label {
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-quiet);
}

.sys-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sys-source {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--color-line-soft);
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-text-panel);
}

.sys-loss {
  position: relative;
  height: 150px;
}

.sys-loss__grid,
.sys-loss__line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sys-loss__line {
  --reveal: 1;
  clip-path: inset(-8px calc((1 - var(--reveal)) * 100%) -8px -8px);
}

.sys-loss__line path {
  fill: none;
  stroke: var(--gem-1);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.sys-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
}

.sys-stats span {
  color: var(--color-text-quiet);
}

.sys-stats b {
  font-weight: 400;
}

.sys-track {
  height: 6px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--color-raised);
}

.sys-track i {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--gem-1);
}

/* VaultLink */
.sys-link__count {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 80px;
  text-align: center;
}

.sys-link__up {
  font-size: 16px;
  line-height: 20px;
  color: #8e8e93;
}

.sys-link__number {
  margin-top: 4px;
  font-size: 72px;
  line-height: 80px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.sys-link__people {
  margin-top: 2px;
  font-size: 16px;
  line-height: 20px;
  color: #c7c7cc;
}

.sys-link__cubes {
  display: block;
  width: 584px;
  height: 116px;
  margin: 94px auto 0;
  overflow: visible;
}

.sys-link__cube polygon {
  stroke-width: 1.5;
}

.sys-link__line {
  stroke-width: 2;
}

.sys-link__caption {
  margin-top: 22px;
  padding-bottom: 80px;
  font-size: 14px;
  line-height: 20px;
  color: #8e8e93;
  text-align: center;
}

/* Closing: the rule across the top; the rest is .closing--plain. */
.sys-closing::before {
  content: "";
  position: absolute;
  top: 0;
  right: max(var(--gutter), calc((100% - var(--content)) / 2));
  left: max(var(--gutter), calc((100% - var(--content)) / 2));
  height: 1px;
  background: var(--color-line-soft);
}

/* Below the width where the sidebar fits. */
@media (max-width: 1279px) {
  .sv-win--desktop {
    grid-template-columns: minmax(0, 1fr);
  }

  .sv-side {
    display: none;
  }
}

/* The Cube and list stack, and the phone VaultOS window takes over. */
@media (max-width: 1023px) {
  .sv-win--desktop {
    display: none;
  }

  .sv-win--phone {
    display: block;
  }

  .sv-tiles {
    width: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    overflow-x: auto;
    scrollbar-width: none;
    gap: 12px;
  }

  .sv-tiles::-webkit-scrollbar {
    display: none;
  }

  .sv-tile {
    flex: none;
    width: 260px;
    padding: 16px 18px;
  }

  .sv-tile__name {
    font-size: 16px;
  }

  .sv-tile__text {
    margin-top: 4px;
    line-height: 20px;
  }

  .sv-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 16px;
  }

  .sv-dots i {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: #4f4f56;
    transition: width 400ms, background-color 400ms;
  }

  .sv-dots i.is-on {
    width: 20px;
    background: var(--color-text-panel);
  }

  .sys-one {
    height: auto;
    padding-bottom: 64px;
  }

  .sys-one__stage {
    position: static;
    width: auto;
    margin-top: 40px;
  }

  .sys-one__photo {
    position: relative;
    top: auto;
    left: auto;
    width: min(100% - 2 * var(--small-inset), 460px);
    margin-inline: auto;
  }

  .sys-one__list {
    position: relative;
    top: auto;
    left: auto;
    gap: 18px;
    width: 206px;
    margin: 32px auto 0;
  }

  .sys-one__rail {
    top: 11px;
    bottom: 55px;
    left: 4px;
    width: 1px;
  }

  .sys-one__item {
    padding-left: 28px;
  }

  .sys-one__dot {
    top: 6.5px;
    width: 9px;
    height: 9px;
  }

  .sys-one__item h3 {
    font-size: 17px;
    line-height: 22px;
    letter-spacing: 0;
  }

  .sys-one__item p {
    margin-top: 2px;
    font-size: 15px;
    line-height: 21px;
    color: #a0a0a8;
  }
}

@media (max-width: 767px) {
  .light-hero.sys-hero {
    height: 266px;
  }

  .sys-hero .light-hero__light {
    height: 560px;
  }

  .sys-hero .light-hero__fade-bottom {
    top: 80px;
  }

  .sys-hero__title {
    top: 100px;
  }

  .sys-one {
    --small-inset: 32px;
    padding-top: 8px;
  }

  .sys-vos__inner {
    padding: 40px 32px 64px;
  }

  .sv-tiles {
    margin-inline: -32px;
    padding-inline: 32px;
  }

  .sys-gem__mark {
    margin-top: 40px;
  }

  .sys-gem {
    padding-bottom: 64px;
  }

  .sys-gem__panel {
    height: 456px;
  }

  .sys-gem__panel .gem-panel__header {
    gap: 8px;
    padding: 0 14px;
  }

  .sys-snip.gem-panel__body {
    padding: 16px 14px 20px;
  }

  .sys-snip .gem-panel__request {
    padding: 10px 12px;
    background: #1d1d20;
    font-size: 13px;
    line-height: 19px;
  }

  .sys-snip .gem-panel__work {
    margin-top: 12px;
  }

  .sys-snip .gem-panel__summary-text {
    display: -webkit-box;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
  }

  .sys-snip .gem-panel__answer {
    margin-top: 12px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 19px;
    color: var(--color-text);
  }

  .sys-snip .gem-panel__rows {
    margin-top: 12px;
  }

  .sys-snip .gem-panel__row {
    height: auto;
    padding: 11px 0;
    border-bottom-color: rgb(79 79 86 / 35%);
    font-size: 13px;
    line-height: 18px;
    color: var(--color-text);
  }

  .sys-snip .gem-panel__row-value {
    font-size: 11px;
    color: var(--color-text-panel);
  }

  .sys-viz {
    margin-top: 12px;
  }

  .sys-bars--wide {
    display: none;
  }

  .sys-bars--narrow {
    display: block;
  }

  .sys-loss {
    height: 90px;
  }

  .sys-stats {
    font-size: 11px;
  }

  .sys-link__count {
    margin-top: 40px;
  }

  .sys-link__up,
  .sys-link__people {
    font-size: 14px;
  }

  .sys-link__number {
    font-size: 64px;
    line-height: 72px;
  }

  .sys-link__cubes {
    width: calc(100% - 64px);
    height: auto;
    margin-top: 48px;
  }

  .sys-link__cube polygon {
    stroke-width: 2.4;
  }

  .sys-link__line {
    stroke-width: 3;
  }

  .sys-link__end {
    r: 5px;
  }

  .sys-link__glow {
    display: none;
  }

  .sys-link__caption {
    margin-top: 20px;
    padding-bottom: 64px;
    font-size: 13px;
    line-height: 18px;
  }

  .sys-closing::before {
    right: 32px;
    left: 32px;
  }
}
/* Security ("Security", "Security · Mobile", "Reference · Security VaultShield"). The whole
   page is black. VaultShield is the shared section; everything else on the page is still. */

.sec-hero .light-hero__fade-bottom {
  top: 165px;
  height: 480px;
}

.sec-hero .light-hero__fade-top {
  height: 400px;
}

.sec-hero__title {
  position: absolute;
  top: 177px;
  left: 0;
  width: 100%;
  max-width: none;
  padding-inline: max(var(--gutter), calc((100% - 9.5em) / 2));
  text-align: center;
}

/* Built-in protection: runs over the hero's light, with no rule. */
.sec-built {
  --small-inset: max(var(--gutter), calc((100% - var(--content)) / 2));
  position: relative;
  padding: 86px var(--small-inset) 96px;
}

.sec-built > .small-head {
  padding-inline: 0;
}

.sec-built__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 80px;
}

.sec-card {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 28px 26px 32px;
  border: 1px solid var(--color-line-soft);
  border-radius: 16px;
  background: var(--color-panel);
}

.sec-card__mark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 18px;
  color: var(--color-text-quiet);
}

.sec-card__mark svg {
  flex: none;
  width: 32px;
  height: 32px;
}

.sec-card h3 {
  margin-top: 40px;
  font-size: 20px;
  line-height: 26px;
  font-weight: 600;
}

.sec-card p {
  margin-top: 10px;
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text-muted);
}

/* Know where your data lives: Cloud against Vault, with a red line over the Vault column. */
.sec-compare {
  padding-bottom: 80px;
}

.sec-compare__table {
  width: calc(100% - 2 * var(--small-inset));
  margin: 80px var(--small-inset) 0;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 16px;
  line-height: 24px;
  text-align: left;
}

.sec-compare__table th,
.sec-compare__table td {
  padding: 20px 24px;
  font-weight: 400;
  vertical-align: top;
  text-wrap: pretty;
}

.sec-compare__table tbody tr {
  border-top: 1px solid #1c1c22;
}

.sec-compare__table thead th {
  font-weight: 600;
}

.sec-compare__table th:first-child {
  width: 25%;
  padding-left: 0;
}

.sec-compare__table tbody th {
  font-weight: 600;
  color: var(--color-text);
}

.sec-compare__table thead th:nth-child(2),
.sec-compare__table td:nth-child(2) {
  color: var(--color-text-quiet);
}

.sec-compare__table thead th:nth-child(3),
.sec-compare__table td:nth-child(3) {
  position: relative;
  background: #0b0b0f;
  color: var(--color-text);
}

.sec-compare__table thead th:nth-child(3)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  background: #e72a52;
}

/* Common security questions */
.sec-faq {
  padding-bottom: 48px;
}

.sec-faq .faq {
  width: auto;
  max-width: none;
  margin: 56px var(--small-inset) 0;
}

.sec-faq .faq__item:first-child {
  border-top: 0;
}

.sec-faq .faq__item:first-child .faq__question {
  padding-top: 0;
}

/* Under 760px the table keeps its three columns, wider than the header so they get room. */
@media (max-width: 759px) {
  .sec-compare__table {
    width: calc(100% - 32px);
    margin: 40px 16px 0;
    font-size: 13px;
    line-height: 19px;
  }

  .sec-compare__table th,
  .sec-compare__table td {
    padding: 14px 10px;
  }

  .sec-compare__table th:first-child {
    width: 92px;
    padding-left: 10px;
  }
}

@media (max-width: 1439px) and (min-width: 768px) {
  .sec-card p {
    text-wrap: balance;
  }
}

@media (max-width: 1179px) {
  .sec-built__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .sec-hero .light-hero__light {
    height: 560px;
  }

  .sec-hero .light-hero__fade-bottom {
    top: 80px;
  }

  .sec-hero__title {
    top: 142px;
  }

  .sec-built {
    --small-inset: 32px;
    padding-top: 56px;
    padding-bottom: 64px;
  }

  .sec-built__cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 32px;
  }

  .sec-card {
    min-height: 238px;
    padding: 24px 24px 28px;
  }

  .sec-card__mark {
    font-size: 13px;
    line-height: 16px;
  }

  .sec-card__mark svg {
    width: 28px;
    height: 28px;
  }

  .sec-card h3 {
    margin-top: 28px;
    font-size: 19px;
    line-height: 24px;
  }

  .sec-card p {
    margin-top: 8px;
  }

  .sec-compare {
    padding-bottom: 64px;
  }

  .sec-faq {
    padding-bottom: 32px;
  }
}

/* Narrower than Paper's phone: let the hand-broken lines wrap on their own. */
@media (max-width: 389px) {
  .sec-card p,
  .sec-faq .faq__question-text {
    text-wrap: balance;
  }
}
/* Questions ("Questions · Desktop" and "Questions · Mobile"): one centered 800 column. */
.questions {
  width: min(800px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding-block: 96px 120px;
}

.questions__title {
  text-align: center;
}

.questions__search {
  margin-top: 40px;
}

.questions__topics {
  margin-top: 72px;
}

/* Paper rounds each tab's text width up to a whole pixel: this extra gap lands the tabs
   on the same pixels across the row. */
.questions__topics .tabs--underline .tabs__list {
  gap: 32.4px;
}

.questions__count {
  margin-top: 24px;
  font-family: var(--font-mono-label);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.12em;
  color: var(--color-text-quiet);
}

.questions__count[hidden] {
  display: none;
}

.questions__panels {
  display: flow-root;
  margin-top: 8px;
}

.questions__chips {
  margin-top: 16px;
}

/* The selected chip's outline is its industry page's gradient. */
.questions__chips .tabs__tab { --slice: linear-gradient(90deg, #86c2f7, #9ba7ff); }
.questions__chips .tabs__tab:nth-child(2) { --slice: linear-gradient(90deg, #96a8ff, #cca0ff); }
.questions__chips .tabs__tab:nth-child(3) { --slice: linear-gradient(90deg, #6ee8ec, #86d4f2); }
.questions__chips .tabs__tab:nth-child(4) { --slice: linear-gradient(90deg, #cca0ff, #ffa0d4); }
.questions__chips .tabs__tab:nth-child(5) { --slice: linear-gradient(90deg, #e9e3ff, #c9c1ff); }

.questions__chips .tabs__tab[aria-selected="true"] {
  border-color: transparent;
  background: linear-gradient(var(--color-black), var(--color-black)) padding-box, var(--slice) border-box;
}

.questions__industry {
  margin-top: 16px;
}

.questions .faq {
  max-width: none;
}

/* The first question starts 56px under the tab row, in every category. */
.questions:not(.is-searching) .faq {
  margin-top: 24px;
}

.questions .contact-line {
  display: block;
}

.questions__cards {
  display: flex;
  gap: 16px;
  margin-top: 96px;
}

.questions__cards li {
  flex: 1 1 0;
  min-width: 0;
}

.questions__card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 24px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: var(--color-charcoal);
  transition: border-color 150ms ease;
}

@media (hover: hover) {
  .questions__card:hover {
    border-color: var(--color-line-hover);
  }
}

.questions__card-title {
  font-size: 18px;
  line-height: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.questions__card-title span {
  font-weight: 400;
  color: var(--color-text-quiet);
}

.questions__card-detail {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text-quiet);
}

.questions__owner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding: 28px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-muted);
}

.questions__owner-title {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

/* Topic labels show only on search results. */
.questions:not(.is-searching) .faq__topic {
  display: none;
}

/* Searching: the tabs and chips step aside and every topic's matching rows run as one list. */
.questions.is-searching .questions__topics,
.questions.is-searching .questions__chips {
  display: none;
}

.questions.is-searching .tab-panel[hidden] {
  display: block;
}

.questions.is-searching .questions__industry {
  margin-top: 0;
}

/* No results: the message has its own "get in touch", and there's no last row to sit under. */
.questions.is-empty .questions__panels {
  display: none;
}

/* Without scripts there's nothing to switch tabs or search with: show every topic. */
.no-js .questions .tab-panel[hidden] {
  display: block;
}

.no-js .questions__search,
.no-js .questions__topics,
.no-js .questions__chips {
  display: none;
}

@media (max-width: 767px) {
  .questions {
    width: auto;
    margin-inline: 24px;
    padding-block: 48px 72px;
  }

  .questions__search {
    margin-top: 24px;
  }

  /* The tab row runs edge to edge. */
  .questions__topics {
    margin-top: 40px;
  }

  .questions__topics .tabs--underline {
    margin: -6px -24px;
  }

  .questions__topics .tabs--underline::after {
    inset-inline: 0;
  }

  .questions__topics .tabs--underline .tabs__list {
    gap: 24.4px;
    padding: 6px 24px;
  }

  .questions__count {
    margin-top: 20px;
  }

  .questions__panels {
    margin-top: 4px;
  }

  .questions:not(.is-searching) .faq {
    margin-top: 34px;
  }

  .questions__chips .tabs--chips {
    margin: -6px -24px;
  }

  .questions__chips .tabs--chips .tabs__list {
    padding: 6px 24px;
  }

  .questions__industry {
    margin-top: 4px;
  }

  .questions .faq__icon {
    width: 28px;
    height: 28px;
  }

  .questions .faq__answer-inner {
    padding: 14px 0 24px;
    font-size: 16px;
    line-height: 24px;
  }

  .questions .contact-line {
    padding-top: 24px;
  }

  .questions__cards {
    flex-direction: column;
    gap: 12px;
    margin-top: 56px;
  }

  .questions__card {
    gap: 4px;
    padding: 20px;
  }

  .questions__card-title {
    font-size: 17px;
    line-height: 24px;
  }

  .questions__owner {
    margin-top: 12px;
    padding: 24px 20px;
    font-size: 15px;
    line-height: 22px;
  }

  .questions__owner-title {
    font-size: 18px;
    line-height: 26px;
  }
}
/* Quickstart guide (CLAUDE.md section 9; "Quickstart · …" in Paper; phone layout from
   specs/quickstart/quickstart-phone-layout.html; motion from
   "Motion prototypes/quickstart-motion.html"). Top and bottom stay put, only the middle
   scrolls. */

.qs {
  --qs-gutter: 24px;
  --qs-fill: #bdbdc5;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  background: var(--color-black);
}

.qs-hd {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding-inline: 24px;
}

.qs-logo {
  display: block;
  position: relative;
  width: 96px;
  height: 22px;
}

.qs-logo img {
  display: block;
  width: 100%;
  height: 100%;
}

.qs-model::after {
  content: "";
  position: absolute;
  inset: -11px -12px;
}

/* On phones the bars live in the bottom bar and the label beside the buttons; on desktop
   they stay at the top. Each bar jumps to its step, with a taller tap area than it shows. */
.qs-seg {
  flex: none;
  display: flex;
  gap: 4px;
}

.qs-top {
  display: none;
}

.qs-seg button {
  flex: 1;
  min-width: 0;
  margin-block: -14px;
  padding-block: 14px;
}

.qs-seg span {
  position: relative;
  display: block;
  height: 3px;
  border-radius: 2px;
  background: #26262c;
  overflow: hidden;
  transition: background-color 120ms ease;
}

.qs-seg b {
  position: absolute;
  inset: 0;
  background: var(--qs-fill);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--ease-out) 100ms;
}

.qs-seg .is-on b {
  transform: scaleX(1);
}

.qs-seg.is-complete b {
  animation: qs-sweep 700ms ease-in-out both;
}

.qs-seg.is-complete button:nth-child(1) b { animation-delay: 350ms; }
.qs-seg.is-complete button:nth-child(2) b { animation-delay: 450ms; }
.qs-seg.is-complete button:nth-child(3) b { animation-delay: 550ms; }
.qs-seg.is-complete button:nth-child(4) b { animation-delay: 650ms; }
.qs-seg.is-complete button:nth-child(5) b { animation-delay: 750ms; }

@keyframes qs-sweep {
  0%, 100% { background: var(--qs-fill); }
  45% { background: #fff; }
}

/* The one allowed mono label on the site. */
.qs-label {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  letter-spacing: 0.08em;
  color: var(--color-text-quiet);
  transition: opacity 160ms var(--ease-out);
}

.qs-label.is-swapping {
  opacity: 0;
}

.qs-switch {
  position: relative;
  z-index: 5;
}

.qs-model {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-text);
}

.qs-model svg {
  transition: transform 200ms var(--ease-out);
}

.qs-model[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.qs-square {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--color-cube);
}

.qs-square[data-model="ion"] { background: var(--color-ion); }
.qs-square[data-model="pro"] { background: var(--color-pro); }

.qs-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 200px;
  padding-block: 6px;
  border: 1px solid var(--color-line);
  border-radius: 12px;
  background: #18181b;
}

.qs-menu[hidden] {
  display: none;
}

.qs-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  font-size: 15px;
  line-height: 22px;
  text-align: left;
  color: var(--color-text-muted);
  transition: color 120ms ease;
}

.qs-option__name {
  flex: 1;
}

.qs-option svg {
  flex: none;
  visibility: hidden;
}

.qs-option[aria-current] {
  font-weight: 500;
  color: var(--color-text);
}

.qs-option[aria-current] svg {
  visibility: visible;
}

.qs-mid {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden auto;
  padding: 0 var(--qs-gutter) 24px;
}

.qs-title {
  flex: none;
  margin-top: 24px;
  font-size: var(--section-title-size);
  line-height: var(--section-title-line);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

/* The one small label on the site: "QUICKSTART" above every headline in the guide. */
.qs-title::before {
  content: "QUICKSTART";
  content: "QUICKSTART" / "";
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--color-text-quiet);
}

.qs-title:focus-visible {
  outline: none;
}

/* The same size and spot on every step. A short phone shrinks it, never below where its
   labels stay readable; below that the middle scrolls. */
.qs-art {
  flex: 0 1 300px;
  min-height: 170px;
  margin-top: 20px;
  width: 100%;
}

.qs-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.qs-copy {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

.qs-copy p {
  font-size: 16px;
  line-height: 26px;
  color: var(--color-text-muted);
}

.qs-bot {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px var(--qs-gutter) 20px;
}

.qs-buttons {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.qs-back {
  height: 44px;
  padding-inline: 22px;
  border: 1px solid #4f4f56;
  border-radius: 8px;
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--color-text);
  transition: border-color 120ms ease, opacity 300ms var(--ease-out);
}

.qs-next {
  height: 44px;
  padding-inline: 32px;
  border-radius: 8px;
  background: var(--qs-fill);
  font-size: 15px;
  line-height: 20px;
  font-weight: 500;
  color: var(--color-black);
  transition: background-color 120ms ease, transform 120ms var(--ease-out), opacity 300ms var(--ease-out);
}

.qs-next:active {
  transform: scale(0.97);
}

.qs-back[inert],
.qs-next[inert] {
  opacity: 0;
}

@media (hover: hover) {
  .qs-option:hover {
    color: var(--color-text);
  }

  .qs-back:hover {
    border-color: #8c8b94;
  }

  .qs-seg button:hover span {
    background: #4f4f56;
  }

  .qs-seg button.is-on:hover b {
    background: #dadae0;
  }

  .qs-next:hover {
    background: #d4d4da;
  }
}

/* First load: the top settles, then the headline, the drawing rises, the copy and the button follow. */
.qs-e {
  transition: opacity 500ms var(--ease-out), transform 600ms var(--ease-out);
  transition-delay: var(--qs-delay, 0s);
}

.qs-row.qs-e { --qs-delay: 50ms; }
.qs-title.qs-e { --qs-delay: 120ms; }
.qs-art.qs-e { --qs-delay: 240ms; }
.qs-bot.qs-e { --qs-delay: 800ms; }

.js .qs.is-boot .qs-e {
  opacity: 0;
  transform: translateY(10px);
}

.js .qs.is-boot .qs-art.qs-e {
  transform: translateY(18px);
}

.js .qs.is-boot .qs-seg.qs-e,
.js .qs.is-boot .qs-row.qs-e,
.js .qs.is-boot .qs-bot.qs-e {
  transform: none;
}

/* Screen change: this one slides out, the next slides in from the side you're heading. */
.qs-mid.is-out > * {
  opacity: 0;
  transform: translateX(calc(var(--qs-dir, 1) * -16px));
  transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out);
}

.qs-mid.is-pre > * {
  opacity: 0;
  transform: translateX(calc(var(--qs-dir, 1) * 24px));
  transition: none;
}

.qs-mid.is-in > * {
  transition: opacity 400ms var(--ease-out), transform 450ms var(--ease-out);
}

.qs-mid.is-in > .qs-art { transition-delay: 60ms; }
.qs-mid.is-in > .qs-copy { transition-delay: 120ms; }

/* Step 3: the names, lines and port outlines draw after the drawing lands. */
.qs-art .hl { transform-box: fill-box; }
.qs-art .grow.o-l { transform-origin: left center; }
.qs-art .grow.o-r { transform-origin: right center; }
.qs-art.cue .grow { transform: scaleX(0); }
.qs-art.cue .fade { opacity: 0; }
.qs-art.go .grow { transform: scaleX(1); transition: transform 800ms cubic-bezier(0.4, 0, 0.2, 1) var(--d, 350ms); }
.qs-art.go .fade { opacity: 1; transition: opacity 350ms var(--ease-out) calc(var(--d, 350ms) + 220ms); }

.qs-art .ppulse {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.qs-art.go .ppulse { animation: qs-port 550ms cubic-bezier(0.4, 0, 0.2, 1) both; }

@keyframes qs-port {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

/* Step 1: the 1 ft measurements keep drawing out from the Cube. */
.qs-art .dim { transform-box: fill-box; }
.qs-art .dl.o-l { transform-origin: left center; }
.qs-art .dl.o-r { transform-origin: right center; }
.qs-art.cue .dim { opacity: 0; }
.qs-art.go .dl { animation: qs-dl 3s var(--ease-out) 450ms infinite both; }
.qs-art.go .tk-out.L { animation: qs-tk-l 3s var(--ease-out) 450ms infinite both; }
.qs-art.go .tk-out.R { animation: qs-tk-r 3s var(--ease-out) 450ms infinite both; }
.qs-art.go .tk-in { animation: qs-tk-in 3s linear 450ms infinite both; }
.qs-art.go .dt { animation: qs-dt 3s linear 450ms infinite both; }

@keyframes qs-dl {
  0% { transform: scaleX(0); opacity: 1; }
  28%, 78% { transform: scaleX(1); opacity: 1; }
  92%, 100% { transform: scaleX(1); opacity: 0; }
}

@keyframes qs-tk-l {
  0% { transform: translateX(102px); opacity: 1; }
  28% { transform: none; opacity: 1; }
  78% { opacity: 1; }
  92%, 100% { transform: none; opacity: 0; }
}

@keyframes qs-tk-r {
  0% { transform: translateX(-102px); opacity: 1; }
  28% { transform: none; opacity: 1; }
  78% { opacity: 1; }
  92%, 100% { transform: none; opacity: 0; }
}

@keyframes qs-tk-in {
  0%, 78% { opacity: 1; }
  92%, 100% { opacity: 0; }
}

@keyframes qs-dt {
  0%, 20% { opacity: 0; }
  34%, 78% { opacity: 1; }
  92%, 100% { opacity: 0; }
}

/* Step 4: the arrow draws to the button; the ring lights and keeps a slow glow. */
.qs-art .arw,
.qs-art .arh,
.qs-art .plug { transform-box: fill-box; }
.qs-art .arw { transform-origin: right center; }
.qs-art.cue .arw,
.qs-art.cue .arh { opacity: 0; }

.qs-art .pring.lit { animation: qs-glow 2.4s ease-in-out infinite alternate; }

@keyframes qs-glow {
  from { filter: drop-shadow(0 0 2px #7aa6ff) drop-shadow(0 0 8px #4f86ff); }
  to { filter: drop-shadow(0 0 3px #8fb4ff) drop-shadow(0 0 16px #4f86ff); }
}

.qs-art .phalo {
  transform-box: fill-box;
  transform-origin: center;
}

.qs-art .phalo.lit { animation: qs-halo 2.4s ease-in-out infinite alternate; }

@keyframes qs-halo {
  from { opacity: 0.75; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1.12); }
}

/* Step 5 and the finished screen: GEM wakes. */
.qs-art .gemwrap {
  transform-box: fill-box;
  transform-origin: center;
}

.qs-art.cue .gemwrap { opacity: 0; transform: scale(0.88); }
.qs-art.go .gemwrap { opacity: 1; transform: none; transition: opacity 800ms var(--ease-out) 550ms, transform 1.1s var(--ease-out) 550ms; }
.qs-art .wingem { transition: opacity 700ms var(--ease-out) 800ms; }
.qs-art.cue .wingem { opacity: 0; }

/* Loops rest while the drawing is scrolled out of view. */
.qs-art.is-paused * { animation-play-state: paused !important; }

/* Without scripts the steps read as one page of text. */
.no-js .qs { height: auto; }
.no-js .qs-mid { overflow: visible; padding-bottom: 48px; }
.no-js .qs-seg,
.no-js .qs-switch,
.no-js .qs-row,
.no-js .qs-bot,
.no-js .qs-art,
.no-js .qs-copy { display: none; }
.no-js .qs-screens { display: block; }
.no-js .qs-screen[data-model="alpha"] { margin-top: 28px; }
.no-js .qs-screen:not([data-model="alpha"]) { display: none; }
.no-js .qs-screen[data-screen="welcome"] h2 { display: none; }
.no-js .qs-screen h2 { margin-bottom: 12px; font-size: 20px; line-height: 28px; font-weight: 600; }
.no-js .qs-screen p { margin-top: 12px; font-size: 16px; line-height: 26px; color: var(--color-text-muted); }

/* Between the phone and the desktop header: the phone layout in one centered column. */
@media (min-width: 600px) {
  .qs { --qs-gutter: max(24px, calc((100vw - 512px) / 2)); }
}

/* Desktop (1440 x 900): the drawing on the left, the text on the right. The headline and
   the Back and button row sit at the same height on every screen. */
@media (min-width: 1024px) {
  .qs {
    --qs-column: min(1120px, calc(100vw - 96px));
    --qs-gutter: calc((100vw - var(--qs-column)) / 2);
    --qs-text: calc(var(--qs-column) * 440 / 1120);
  }

  .qs-hd {
    height: 80px;
    padding-inline: 48px;
  }

  .qs-logo {
    width: 132px;
    height: 31px;
  }

  .qs-top {
    display: contents;
  }

  .qs-seg--top {
    gap: 6px;
    padding: 32px var(--qs-gutter) 0;
  }

  .qs-seg--top button {
    margin-block: -12px;
    padding-block: 12px;
  }

  .qs-seg--bar,
  .qs-label--bar {
    display: none;
  }

  .qs-row {
    flex: none;
    display: flex;
    align-items: center;
    height: 48px;
    padding: 16px var(--qs-gutter) 0;
  }

  .qs-label {
    font-size: 12px;
  }

  .qs-model {
    height: 32px;
    font-size: 15px;
    line-height: 22px;
  }

  .qs-mid {
    display: grid;
    grid-template-columns: calc(var(--qs-column) * 600 / 1120) calc(var(--qs-column) * 80 / 1120) var(--qs-text);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "art . title"
      "art . copy"
      "art . rest";
    align-content: start;
    margin-top: 64px;
    padding-bottom: 0;
  }

  .qs-art {
    grid-area: art;
    min-height: 0;
    margin: 0;
    aspect-ratio: 600 / 526;
    max-height: calc(100dvh - 227px - 68px);
  }

  .qs-title {
    grid-area: title;
    margin-top: 72px;
  }

  .qs-title::before {
    margin-bottom: 12px;
    font-size: 12px;
  }

  .qs-copy {
    grid-area: copy;
    gap: 14px;
    margin-top: 24px;
  }

  .qs-copy p {
    font-size: 17px;
    line-height: 28px;
  }

  /* On a short window the row sits under the scrolling middle, in the text column. */
  .qs-bot {
    width: calc(var(--qs-text) + var(--qs-gutter));
    height: 68px;
    margin-left: auto;
    padding: 0 var(--qs-gutter) 24px 0;
  }
}

@media (min-width: 1024px) and (min-height: 760px) {
  .qs-bot {
    position: absolute;
    top: 664px;
    right: var(--qs-gutter);
    width: var(--qs-text);
    height: 44px;
    padding: 0;
  }

  .qs-art {
    max-height: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qs,
  .qs *,
  .qs *::after {
    transition: none !important;
  }

  .js .qs.is-boot .qs-e,
  .js .qs.is-boot .qs-art.qs-e {
    opacity: 1;
    transform: none;
  }

  .qs-seg.is-complete b,
  .qs-art .dim,
  .qs-art .ppulse,
  .qs-art .pring.lit,
  .qs-art .phalo.lit {
    animation: none !important;
  }

  .qs-art .ppulse { stroke-dashoffset: 0; }
  .qs-art .dim { opacity: 1 !important; transform: none !important; }
}
/* Industry pages ("Healthcare", "Healthcare · Mobile" and the pages that follow it). The
   page's slice comes from the body's accent class; the GEM ring and mark stay full opal. */

.ind-icon {
  display: block;
  width: 32px;
  height: 32px;
  flex: none;
}

/* Hero: a full-bleed picture behind a transparent header. */
.ind-hero {
  position: relative;
  overflow: hidden;
  padding: var(--hero-top, 156px) var(--gutter) 96px;
  background: var(--color-black);
  text-align: center;
}

.ind-hero__image,
.ind-closing__image {
  position: absolute;
  inset: 0;
}

.ind-hero__image picture,
.ind-closing__image picture {
  display: block;
  height: 100%;
}

.ind-hero__image img,
.ind-closing__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Phones: Paper's mobile background at Paper's size from the top of the section, so its
   cells stay the size they are in Paper. A section taller than the picture runs on in black.
   A wider phone scales it with the width. */
@media (max-width: 480px) {
  .ind-hero__image picture,
  .ind-closing__image picture {
    height: auto;
  }

  .ind-hero__image img,
  .ind-closing__image img {
    width: max(100%, 390px);
    max-width: none;
    height: auto;
    margin-left: calc((100% - max(100%, 390px)) / 2);
  }
}

/* The lit cells, drawn live over the picture (assets/scripts/starry.js). */
.ind-starry {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ind-hero__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ind-hero__icon .ind-icon {
  width: 72px;
  height: 72px;
}

.ind-hero h1 {
  margin-top: 24px;
}

.ind-hero__sub {
  margin-top: 24px;
  font-size: 20px;
  line-height: 28px;
  color: #a0a0a8;
}

.ind-hero__actions {
  margin-top: 32px;
}

/* GEM tabs and the panel under them. */
.ind-gem {
  padding: 40px var(--gutter) var(--gem-bottom, 120px);
  background: var(--color-black);
  text-align: center;
}

.ind-gem .t-headline {
  max-width: 17.8em;
  margin-inline: auto;
}

.ind-gem__sub {
  max-width: 900px;
  margin: 20px auto 0;
  font-size: 20px;
  line-height: 28px;
  color: var(--color-text-muted);
}

.ind-gem__tabs {
  margin-top: 64px;
}

.ind-panel--page {
  width: 100%;
  max-width: 960px;
  height: auto;
  margin: 24px auto 0;
}

.ind-views {
  display: grid;
  flex: 1;
}

/* Every tab's panel sits in one cell, so the tallest sets the height and switching tabs
   never moves the page. */
.ind-view {
  grid-area: 1 / 1;
  min-width: 0;
}

.ind-view[hidden] {
  display: flex;
  visibility: hidden;
}

.ind-view:focus-visible {
  outline-offset: -3px;
}

/* Rows keep their height; a tab with less to say leaves room at the bottom of the panel. */
.ind-panel--page .ind-panel__body {
  padding-bottom: var(--ind-body-bottom, 26px);
}

.ind-panel--page .ind-table {
  --ind-cols: var(--cols-d);
  flex: none;
}

.ind-panel--page .ind-table__row {
  flex: none;
}

.ind-panel--page .ind-table__tag {
  color: var(--ind-tag-color);
}

/* Training curves. */
.ind-loss {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  margin-top: 18px;
  font-family: var(--font-mono);
  color: var(--color-text-quiet);
}

.ind-loss__legend {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  font-size: 11px;
  line-height: 14px;
}

.ind-loss__legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ind-loss__legend i {
  width: 12px;
  height: 2px;
  border-radius: 2px;
}

.ind-loss__plot {
  position: relative;
  flex: 1;
  min-height: 80px;
  margin-top: 6px;
}

.ind-loss__plot svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ind-loss__numbers {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 12px;
  line-height: 16px;
}

.ind-loss__numbers b {
  font-weight: 400;
  color: var(--color-text);
}

.ind-loss__bar {
  height: 6px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 3px;
  background: #1c1c22;
}

.ind-loss__bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
}

/* Government's GEM results. Paper sets each request's bubble a little wider than its words. */
@media (min-width: 768px) {
  .ind-panel--page .ind-panel__q p {
    min-width: min(var(--q-w, 0px), 84%);
  }
}

/* The chart is Paper's, 911 wide inside its border. */
.ind-panel--page .ind-chart--page {
  flex: none;
  margin-top: 20px;
  padding: 14px 0 6px;
}

.ind-chart--page .ind-chart__head {
  padding-bottom: 9px;
  line-height: 12px;
}

.ind-chart--page .ind-chart__svg--wide {
  max-width: none;
}

.ind-file-icon {
  display: block;
  flex: none;
}

.ind-docs {
  display: grid;
  flex: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.ind-doc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid rgb(79 79 86 / 25%);
  border-radius: 12px;
  background: #0a090f;
}

.ind-doc__id {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.06em;
  color: #a0a0a8;
}

.ind-doc__year {
  margin-left: auto;
  color: var(--color-text-quiet);
}

.ind-doc__name {
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
}

.ind-doc__quote {
  font-size: 13px;
  line-height: 20px;
  color: #a0a0a8;
}

.ind-doc__quote mark {
  padding-inline: 2px;
  border-radius: 3px;
  background: rgb(255 255 255 / 8%);
  color: var(--color-text);
}

.ind-doc__result {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 13px;
  letter-spacing: 0.06em;
}

.ind-docs__more {
  grid-column: 1 / -1;
  padding-top: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 12px;
  letter-spacing: 0.06em;
  color: var(--color-text-quiet);
}

.ind-code {
  display: flex;
  flex: none;
  align-items: stretch;
  gap: 10px;
  margin-top: 20px;
}

.ind-code__file {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgb(79 79 86 / 25%);
  border-radius: 12px;
  background: #0a090f;
}

.ind-code__name {
  display: flex;
  align-items: center;
  height: 34px;
  padding-inline: 14px;
  border-bottom: 1px solid rgb(79 79 86 / 25%);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  color: #a0a0a8;
}

.ind-code__lines {
  padding-block: 10px;
}

.ind-code__line {
  display: flex;
  align-items: center;
  height: 21px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 14px;
  white-space: pre;
  color: #a0a0a8;
}

.ind-code__line code {
  font: inherit;
}

.ind-code__no {
  flex: none;
  width: 34px;
  padding-right: 12px;
  text-align: right;
  color: #4f4f56;
}

.ind-code__line .k { color: var(--color-text); }
.ind-code__line .n,
.ind-code__line .f { color: #d7d6de; }
.ind-code__line .c { color: #6e6d76; }

.ind-code__arrow {
  display: flex;
  flex: none;
  align-items: center;
  font-size: 16px;
  color: var(--color-text-quiet);
}

.ind-code__check {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  line-height: 16px;
  color: #d7d6de;
}

.ind-code__check b {
  font-weight: 500;
  color: #96a8ff;
}

.ind-code__ok {
  color: var(--color-text-quiet);
}

.ind-code__dot {
  color: #4f4f56;
}

.ind-gantt {
  flex: none;
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid rgb(79 79 86 / 25%);
  border-radius: 12px;
}

.ind-gantt__file {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding-inline: 16px;
  border-bottom: 1px solid rgb(79 79 86 / 25%);
  background: #0a090f;
  font-size: 13px;
  line-height: 16px;
}

.ind-gantt__pages {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  color: var(--color-text-quiet);
}

.ind-gantt__rows {
  padding: 6px 16px 12px;
}

.ind-gantt__months,
.ind-gantt__row {
  display: flex;
  align-items: center;
  height: 38px;
}

.ind-gantt__months {
  height: 28px;
}

.ind-gantt__name {
  flex: none;
  width: 170px;
  font-size: 13px;
  line-height: 16px;
  color: #d7d6de;
}

.ind-gantt__track {
  position: relative;
  flex: 0 1 560px;
  min-width: 0;
  height: 100%;
}

.ind-gantt__months .ind-gantt__track span {
  position: absolute;
  top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 11px;
  letter-spacing: 0.08em;
  color: var(--color-text-quiet);
}

.ind-gantt__bar {
  position: absolute;
  top: 13px;
  height: 12px;
  border-radius: 3px;
  transform-origin: left center;
}

.ind-gantt__bar--done {
  background: #3a3a42;
}

.ind-gantt__bar--plan {
  border: 1px dashed var(--color-text-quiet);
}

.ind-gantt__today {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #4f4f56;
}

.ind-gantt__status {
  flex: none;
  width: 130px;
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  text-align: right;
  white-space: nowrap;
  color: #a0a0a8;
}

/* The working section: a carousel or a bento grid, on charcoal. */
.ind-work {
  --ind-inset: max(var(--gutter), calc((100% - var(--content)) / 2));
  padding: 76px 0 96px;
  overflow: hidden;
  background: var(--color-charcoal);
}

.ind-work__title {
  max-width: calc(17.8em + 2 * var(--ind-inset));
  padding-inline: var(--ind-inset);
}

.ind-work .carousel,
.ind-bento {
  margin-top: 48px;
}

.ind-work .carousel__title {
  line-height: 32px;
}

@media (min-width: 768px) {
  .ind-work .carousel__tile {
    height: 560px;
  }
}

/* Bento grid (Finance, Government): the page sets its columns and rows in working.grid,
   each tile its place in --area. */
.ind-bento {
  display: grid;
  grid-template-rows: var(--bento-rows);
  grid-template-columns: var(--bento-cols);
  gap: 24px;
  margin-inline: var(--ind-inset);
}

.ind-bento__tile {
  position: relative;
  display: flex;
  grid-area: var(--area);
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  overflow: hidden;
  padding: 28px;
  border-radius: var(--radius-card);
  background: var(--color-black);
}

.ind-bento__title {
  text-wrap: balance;
  font-size: 26px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ind-bento__label {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.06em;
  color: var(--color-text-quiet);
}

/* The firm's files. */
.ind-bento__tile--ledger {
  justify-content: flex-start;
  gap: 32px;
  padding: 40px 36px 36px;
}

.ind-ledger {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #232328;
  border-radius: 14px;
  background: #0d0d11;
}

.ind-ledger__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding-inline: 18px;
  border-bottom: 1px solid #232328;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.ind-ledger__head span:last-child {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--color-text-quiet);
}

.ind-ledger__rows {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.ind-ledger__row {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding-inline: 18px;
  border-bottom: 1px solid #1d1d22;
}

.ind-ledger__row:last-child {
  border-bottom: 0;
}

.ind-ledger__icon {
  width: 16px;
  height: 18px;
  flex: none;
}

.ind-ledger__file {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ind-ledger__name {
  font-size: 14px;
  line-height: 19px;
  color: #e4e4ea;
}

.ind-ledger__kind {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  color: var(--color-text-quiet);
}

/* Backtests: the title and $0 on top, the weekly bars below. */
.ind-bento__tile--backtests {
  padding: 32px 32px 28px;
}

.ind-bt__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  row-gap: 10px;
}

.ind-bt__line {
  display: flex;
  gap: 4px;
  font-size: 15px;
  line-height: 22px;
  color: #a0a0a8;
}

.ind-bt__line-end {
  display: flex;
  gap: 4px;
}

.ind-bt__line b {
  font-weight: 600;
  color: var(--color-text);
}

.ind-bt__line.is-running b {
  font-variant-numeric: tabular-nums;
}

.ind-bt__zero {
  display: flex;
  grid-area: 1 / 2 / 3 / 2;
  align-items: flex-start;
  font-size: 84px;
  line-height: 84px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.ind-bt__dollar {
  margin-top: 6px;
  padding-right: 3px;
  font-size: 50px;
  line-height: 50px;
  letter-spacing: -0.04em;
}

.ind-bt__chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ind-runs__bars--fluid {
  width: 100%;
}

.ind-bt__weeks {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.06em;
  color: var(--color-text-quiet);
}

/* The overnight job. */
.ind-nightly__clock {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 14px;
  font-size: 48px;
  line-height: 52px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.ind-nightly.is-running .ind-nightly__clock {
  font-variant-numeric: tabular-nums;
}

.ind-nightly__clock small {
  font-size: 18px;
  line-height: 22px;
  letter-spacing: 0;
  color: #a0a0a8;
}

.ind-nightly__track {
  height: 6px;
  margin-top: 14px;
  overflow: hidden;
  border-radius: 3px;
  background: #1c1c22;
}

.ind-nightly__track i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background-image: linear-gradient(90deg, #96a8ff, #cca0ff);
}

.ind-nightly__foot {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.06em;
  color: var(--color-text-quiet);
}

.ind-nightly__runs {
  color: var(--color-text);
}

/* Fine-tuning. */
.ind-tuning {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ind-tuning__step {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  border-bottom: 1px solid #1d1d22;
}

.ind-tuning__step:last-child {
  border-bottom: 0;
}

.ind-tuning__step i {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
}

.ind-tuning__name {
  flex: 1 1 0;
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
  color: #e4e4ea;
}

/* A VaultOS panel inside a tile. */
.ind-vos {
  position: absolute;
  top: var(--top);
  right: 36px;
  left: 36px;
  overflow: hidden;
  border: 1px solid #232328;
  border-radius: 14px;
  background: #0d0d11;
}

.ind-vos__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding-inline: 18px;
  border-bottom: 1px solid #232328;
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
}

.ind-vos__head span:last-child {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--color-text-quiet);
}

.ind-vos li + li {
  border-top: 1px solid #1d1d22;
}

.ind-tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding-inline: 8px;
  border: 1px solid color-mix(in srgb, var(--tag) 25%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--tag) 8%, transparent);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
  color: var(--tag);
}

.ind-tag--pill {
  height: auto;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--tag) 10%, transparent);
}

.ind-tag--off {
  gap: 5px;
  border-color: #2a2a30;
  background: #1a1a20;
  color: var(--color-text-quiet);
}

.ind-tag--off svg {
  width: 10px;
  height: 11px;
}

.ind-tag--bento {
  height: auto;
  padding: 5px 8px;
}

.ind-tag--plain {
  --tag: var(--color-text);
  border-color: #2a2a30;
  background: #1a1a20;
  color: var(--color-text);
}

.ind-file {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  grid-template-rows: 20px 14px;
  align-content: center;
  column-gap: 12px;
  row-gap: 2px;
  height: 62px;
  padding-inline: 18px;
}

.ind-file__icon {
  grid-row: 1 / 3;
  align-self: center;
  width: 16px;
  height: 18px;
}

.ind-file__name {
  grid-area: 1 / 2;
  font-size: 14px;
  line-height: 20px;
  color: #e4e4ea;
}

.ind-file__kind {
  grid-area: 2 / 2;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  color: var(--color-text-quiet);
}

.ind-file__state {
  position: relative;
  display: flex;
  grid-area: 1 / 3 / 3 / 3;
  align-self: center;
  justify-content: flex-end;
}

.ind-file__working {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 100%;
  padding-inline: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  color: var(--color-text-quiet);
  opacity: 0;
}

.ind-file__working i {
  width: 10px;
  height: 10px;
  border: 1.5px solid #3a3a42;
  border-top-color: #96a8ff;
  border-radius: 50%;
}

/* The $0 meter. */
.ind-meter {
  position: absolute;
  top: 56px;
  right: 44px;
  left: 44px;
  display: flex;
  flex-direction: column;
}

.ind-meter__zero {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: 112px;
  line-height: 112px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.ind-meter__dollar {
  margin-top: 5px;
  font-size: 67px;
  line-height: 67px;
}

.ind-meter__tokens {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 20px;
  line-height: 26px;
}

.ind-meter__count {
  font-weight: 600;
  color: #96a8ff;
}

.ind-meter__jobs {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid #232328;
}

.ind-meter__job {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16px;
  line-height: 22px;
  color: #d4d4d8;
}

.ind-meter__track {
  display: block;
  height: 12px;
  overflow: hidden;
  border-radius: 6px;
  background: #1c1c22;
}

.ind-meter__track i {
  display: block;
  height: 100%;
  border-radius: 6px;
}

/* An overnight job. */
.ind-night__dial {
  display: none;
}

.ind-night__head {
  position: absolute;
  top: 150px;
  right: 44px;
  left: 44px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.ind-night__label {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.06em;
  color: var(--color-text-quiet);
}

.ind-night__job {
  margin-top: 10px;
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
}

.ind-night__clock {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding-bottom: 18px;
  font-size: 72px;
  line-height: 72px;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.ind-night__clock small {
  font-size: 27px;
  line-height: 30px;
  letter-spacing: 0;
  color: #a0a0a8;
}

.ind-night.is-running .ind-night__clock {
  font-variant-numeric: tabular-nums;
}

.ind-night__line {
  position: absolute;
  top: 340px;
  left: 44px;
  width: 792px;
  padding-top: 18px;
}

.ind-night__line svg {
  display: block;
}

.ind-night__track {
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: #1c1c22;
}

.ind-night__track i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background-image: linear-gradient(90deg, #96a8ff, #cca0ff);
}

.ind-night__ticks {
  position: relative;
  height: 36px;
}

.ind-night__ticks i {
  position: absolute;
  top: 6px;
  width: 1px;
  height: 8px;
  background: #3a3a42;
}

.ind-night__ticks span {
  position: absolute;
  top: 22px;
  width: 60px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  text-align: center;
  color: var(--color-text-quiet);
}

.ind-night__foot {
  position: absolute;
  right: 44px;
  bottom: 48px;
  left: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  border-top: 1px solid #1d1d22;
}

.ind-night__facts {
  display: flex;
  gap: 28px;
  font-size: 14px;
  line-height: 20px;
  color: #a0a0a8;
}

.ind-night__facts span {
  display: flex;
  gap: 5px;
}

.ind-night__facts b {
  font-weight: 600;
  color: var(--color-text);
}

.ind-night__facts .ind-night__flagged {
  color: #b4a4ff;
}

.ind-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
}

.ind-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
}

.ind-status.is-running {
  color: #a0a0a8;
}

.ind-status.is-running i {
  background: #96a8ff;
}

/* Who can open what. */
.ind-person {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding-inline: 18px;
}

.ind-person__avatar {
  width: 22px;
  height: 22px;
  flex: none;
  border: 1.5px solid #3a3a42;
  border-radius: 50%;
  background: #16161b;
}

.ind-person__name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 20px;
  color: #e4e4ea;
}

.ind-person--off .ind-person__name {
  color: #6e6d76;
}

/* Protected datasets. */
.ind-sets {
  position: absolute;
  top: 144px;
  right: 36px;
  left: 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ind-set {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px 20px;
  border: 1px solid color-mix(in srgb, var(--tag) 25%, transparent);
  border-radius: 14px;
  background: #0d0d11;
}

.ind-set__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ind-set__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.06em;
  color: var(--tag);
}

.ind-set__label svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--tag);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ind-set__tag {
  padding-inline: 9px;
}

.ind-set__name {
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
}

/* The lab's archive. */
.ind-arch {
  position: absolute;
  top: 68.5px;
  right: 44px;
  left: 44px;
  display: flex;
  flex-direction: column;
}

.ind-arch__search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding-inline: 16px;
  border: 1px solid #232328;
  border-radius: 12px;
  background: #0d0d11;
}

.ind-arch__search svg {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: #8c8b94;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.ind-arch__query {
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
  color: #e4e4ea;
}

/* The caret takes no room, so typing never moves anything. */
.ind-arch__caret {
  position: relative;
  display: inline-block;
  width: 0;
  height: 1em;
  vertical-align: text-bottom;
}

.ind-arch__caret::after {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 0;
  width: 1.5px;
  background: #96a8ff;
}

.ind-arch__rest {
  visibility: hidden;
}

.ind-arch__count {
  display: flex;
  justify-content: space-between;
  padding-top: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.06em;
  color: var(--color-text-quiet);
}

.ind-arch__found {
  color: #96a8ff;
}

.ind-arch__grid {
  flex: none;
  align-self: center;
  margin-top: 10px;
}

.ind-arch__grid--phone {
  display: none;
}

/* Rerun without counting tokens. */
.ind-runs {
  position: absolute;
  top: 235px;
  right: 44px;
  left: 44px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.ind-runs__total {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 250px;
}

.ind-runs__zero {
  display: flex;
  align-items: flex-start;
  font-size: 112px;
  line-height: 112px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.ind-runs__dollar {
  margin-top: 5px;
  padding-right: 4px;
  font-size: 67px;
  line-height: 67px;
}

.ind-runs__line {
  font-size: 18px;
  line-height: 26px;
  color: #a0a0a8;
}

.ind-runs__line > * {
  display: block;
}

.ind-runs__line b {
  font-weight: 600;
  color: var(--color-text);
}

.ind-runs__chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 500px;
}

.ind-runs__bars {
  display: block;
}

.ind-runs__bars--phone {
  display: none;
}

.ind-runs__bars rect[data-runs-bar] {
  transform-box: fill-box;
  transform-origin: center bottom;
}

.ind-runs__weeks {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text-quiet);
}

/* One system for the whole lab. */
.ind-lab {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}

.ind-lab--wide {
  top: -30px;
}

.ind-lab--phone {
  display: none;
}

.ind-lab__label {
  position: absolute;
  top: calc(var(--y) - 30px);
  left: var(--x);
  width: 120px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  text-align: center;
  color: #a0a0a8;
}

/* Government's tiles. */
.ind-bento__tile--models,
.ind-bento__tile--shield,
.ind-bento__tile--usage,
.ind-bento__tile--network {
  padding: 32px;
}

.ind-bento__tile--models {
  justify-content: flex-start;
  gap: 28px;
}

.ind-bento__tile--network {
  flex-direction: row;
  gap: 32px;
}

.ind-tag--small {
  gap: 6px;
  height: auto;
  padding: 4px 8px;
}

.ind-tag--ready {
  --tag: #a0a0a8;
}

.ind-tag--ready,
.ind-tag--waiting {
  border-color: #2a2a30;
  background: #1a1a20;
  color: #a0a0a8;
}

.ind-spin {
  display: none;
  flex: none;
  width: 10px;
  height: 10px;
  border: 1.5px solid #6ee8ec33;
  border-top-color: #6ee8ec;
  border-radius: 50%;
  animation: ind-spin 0.8s linear infinite;
}

.ind-tag--waiting .ind-spin,
.is-checking .ind-spin {
  display: block;
}

@keyframes ind-spin {
  to { transform: rotate(360deg); }
}

.ind-win {
  overflow: hidden;
  border: 1px solid #232328;
  border-radius: 14px;
  background: #0d0d11;
}

.ind-win__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding-inline: 18px;
  border-bottom: 1px solid #232328;
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
}

.ind-win__head span:last-child {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 12px;
  letter-spacing: 0.06em;
  color: var(--color-text-quiet);
}

.ind-model {
  display: flex;
  align-items: center;
  height: 38px;
  padding-inline: 18px;
  border-bottom: 1px solid #1d1d22;
  font-size: 13px;
  line-height: 16px;
}

.ind-model:last-child {
  border-bottom: 0;
}

.ind-model__name {
  flex: 1 1 0;
  min-width: 0;
  color: #e4e4ea;
}

.ind-model__maker {
  flex: none;
  width: 150px;
  color: #a0a0a8;
}

.ind-model__size {
  flex: none;
  width: 80px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  color: var(--color-text-quiet);
}

.ind-model__state {
  display: flex;
  flex: none;
  justify-content: flex-end;
  width: 96px;
}

.ind-shield .ind-bento__label,
.ind-usage .ind-bento__label {
  line-height: 13px;
}

.ind-shield__file {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #232328;
  border-radius: 12px;
  background: #0d0d11;
}

.ind-shield__file > svg {
  flex: none;
  width: 16px;
  height: 18px;
}

.ind-shield__names {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ind-shield__name {
  font-size: 13px;
  line-height: 16px;
}

.ind-shield__from {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 13px;
  color: var(--color-text-quiet);
}

.ind-shield__checks {
  margin-top: 12px;
}

.ind-shield__checks li {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  border-bottom: 1px solid #1d1d22;
  font-size: 13px;
  line-height: 16px;
  color: #e4e4ea;
}

.ind-shield__checks li:last-child {
  border-bottom: 0;
}

.ind-shield__mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
}

.ind-shield__mark svg {
  display: block;
  width: 12px;
  height: 12px;
}

.is-checking .ind-shield__mark svg {
  display: none;
}

.ind-usage__total {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 14px;
}

.ind-usage__count {
  font-size: 56px;
  line-height: 56px;
  font-weight: 600;
  letter-spacing: -0.04em;
}

.ind-usage__unit {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
  color: #a0a0a8;
}

.ind-usage__bars {
  --bars-h: 63px;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: calc(var(--bars-h) + 1px);
  margin-top: 18px;
  border-bottom: 1px solid #26262b;
}

.ind-usage__bars i {
  flex: 1 1 0;
  height: calc(var(--h) * var(--bars-h));
  border-radius: 2px;
  transform-origin: center bottom;
}

.ind-usage__foot {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 13px;
  letter-spacing: 0.06em;
  color: var(--color-text-quiet);
}

.ind-usage__cost {
  display: flex;
  gap: 7.26px;
}

.ind-usage__cost b {
  font-weight: 400;
  color: var(--color-text);
}

.ind-net__text {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: space-between;
  width: 300px;
}

.ind-net__note {
  font-size: 15px;
  line-height: 22px;
  color: #a0a0a8;
}

.ind-win--network {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-width: 0;
}

.ind-win--network ul {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}

.ind-net__row {
  display: flex;
  flex: 1 0 auto;
  align-items: center;
  gap: 12px;
  height: 63.75px;
  padding-inline: 18px;
  border-bottom: 1px solid #1d1d22;
  font-size: 13px;
  line-height: 16px;
  color: #e4e4ea;
}

.ind-net__row:last-child {
  border-bottom: 0;
}

.ind-net__row i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 4px;
}

.ind-net__row span {
  flex: 1 1 0;
  min-width: 0;
}

.ind-net__row b {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--color-text);
}

/* Stat tiles above a table, and tables whose cells each say what they are (Legal). */
.ind-panel--page .ind-tiles {
  margin-top: 20px;
}

.ind-panel--page .ind-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
}

.ind-panel--page .ind-tile__value {
  margin-top: 0;
  font-size: 24px;
  line-height: 30px;
}

.ind-panel--page .ind-tiles + .ind-table {
  margin-top: 16px;
}

.ind-table--cells .ind-table__row {
  min-height: var(--row-h);
}

.ind-panel--page .ind-table--discovery {
  --ind-cols: minmax(0, 1fr) 220px 160px;
  --row-h: 40px;
}

.ind-panel--page .ind-table--contracts {
  --ind-cols: 150px minmax(0, 1fr) 200px 90px;
  --row-h: 44px;
}

.ind-panel--page .ind-table--depositions {
  --ind-cols: minmax(0, 1fr) 230px 230px;
  --row-h: 56px;
}

.ind-panel--page .ind-table--briefs {
  --ind-cols: 220px minmax(0, 1fr) 130px;
  --row-h: 46px;
  margin-top: 20px;
}

.ind-table--briefs .ind-table__row {
  column-gap: 20px;
}

.ind-cell-quiet {
  font-size: 13px;
  line-height: 18px;
  color: #a0a0a8;
}

.ind-cell-tag {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
}

.ind-cell-who,
.ind-cell-said,
.ind-cell-title {
  display: block;
}

.ind-cell-who {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  color: var(--color-text-quiet);
}

.ind-cell-title + .ind-cell-who {
  margin-top: 2px;
}

.ind-cell-bar {
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: #1c1c22;
}

.ind-cell-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
}

.ind-tag--chip {
  height: auto;
  padding: 5px 9px;
}

.ind-tag--match {
  --tag: #a0a0a8;
  border-color: #2a2a30;
  background: #1d1d22;
}

/* Past work, found by one question. */
.ind-find {
  position: absolute;
  top: 144px;
  right: 44px;
  left: 44px;
  overflow: hidden;
  border: 1px solid #232328;
  border-radius: 14px;
  background: #0d0d11;
}

/* Healthcare's study search: five rows, higher in the tile, as in Paper. */
.ind-find--tall {
  top: var(--top);
  right: 36px;
  left: 36px;
}

.ind-find--tall .ind-find__bar {
  height: 54px;
}

.ind-find--tall .ind-arch__query,
.ind-find--tall .ind-find__name {
  font-size: 15px;
  line-height: 20px;
  color: var(--color-text);
}

.ind-find--tall .ind-find__count {
  padding-block: 10px;
  border-top: 1px solid #232328;
}

.ind-find--tall .ind-find__row {
  height: 59px;
}

.ind-find--tall .ind-find__file {
  gap: 2px;
}

.ind-find--tall .ind-find__meta {
  font-size: 10px;
  line-height: 13px;
  letter-spacing: 0.06em;
}

.ind-find__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding-inline: 18px;
  border-bottom: 1px solid #232328;
}

.ind-find__bar svg {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: #8c8b94;
  stroke-width: 1.4;
  stroke-linecap: round;
}

.ind-find__count {
  padding: 14px 18px 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.08em;
  color: var(--color-text-quiet);
}

.ind-find__row {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 68px;
  padding-inline: 18px;
  border-top: 1px solid #1d1d22;
}

.ind-find__icon {
  width: 16px;
  height: 18px;
  flex: none;
  fill: none;
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.ind-find__file {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.ind-find__name {
  font-size: 14px;
  line-height: 18px;
  white-space: nowrap;
  color: #e4e4ea;
}

.ind-find__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
  color: var(--color-text-quiet);
}

.ind-find .ind-arch__caret::after {
  background: #cca0ff;
}

/* A line along the bottom of a tile. */
.ind-tile-foot {
  position: absolute;
  right: 44px;
  bottom: 88px;
  left: 44px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 60px;
  border-top: 1px solid #1d1d22;
}

/* The chronology. */
.ind-chron {
  position: absolute;
  top: 149px;
  left: 44px;
  width: 792px;
  height: 200px;
}

.ind-chron__line {
  position: absolute;
  inset: 0;
}

.ind-chron [data-chron-rule] {
  transform-box: fill-box;
  transform-origin: left center;
}

.ind-chron__stem {
  fill: #cca0ff45;
}

.ind-chron__dot {
  fill: #cca0ff26;
  stroke: #cca0ff;
  transform-box: fill-box;
  transform-origin: center;
}

.ind-chron__mark.is-hot .ind-chron__stem {
  fill: #ffa0d466;
}

.ind-chron__mark.is-hot .ind-chron__dot {
  fill: #ffa0d433;
  stroke: #ffa0d4;
}

.ind-chron__event {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 150px;
  text-align: center;
}

.ind-chron__date {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--color-text);
}

.is-hot > .ind-chron__date {
  color: #ffa0d4;
}

.ind-chron__what {
  font-size: 13px;
  line-height: 18px;
  color: #a0a0a8;
}

.ind-chron__list {
  display: none;
}

.ind-chron__built {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.08em;
  color: var(--color-text-quiet);
}

.ind-chron__sources {
  flex: 1 1 0;
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
  color: #a0a0a8;
}

/* The pages reviewed. */
.ind-pages {
  position: absolute;
  top: 95px;
  right: 44px;
  left: 44px;
}

.ind-pages__count {
  font-size: 72px;
  line-height: 72px;
  font-weight: 650;
  letter-spacing: -0.04em;
}

.ind-pages__label {
  padding-top: 12px;
  font-size: 18px;
  line-height: 24px;
  color: #a0a0a8;
}

.ind-pages__bar {
  display: flex;
  gap: 3px;
  height: 14px;
  margin-top: 68px;
  overflow: hidden;
  border-radius: 7px;
}

.ind-pages__bar i {
  display: block;
  width: calc((100% - 12px) * var(--share) * var(--grown, 1));
  flex: none;
}

.ind-pages__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding-top: 18px;
}

.ind-pages__legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 224px;
}

.ind-pages__legend i {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 2px;
}

.ind-pages__legend span {
  flex: 1 1 0;
  font-size: 13px;
  line-height: 18px;
  color: #a0a0a8;
}

.ind-pages__legend b {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}

/* The ethical wall. */
.ind-wall {
  position: absolute;
  top: 141px;
  right: 44px;
  left: 44px;
  display: flex;
}

.ind-wall__team {
  width: 204px;
  flex: none;
}

.ind-wall__matter {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.08em;
  color: var(--color-text-quiet);
}

.ind-wall__role {
  padding-top: 6px;
  font-size: 17px;
  line-height: 22px;
  font-weight: 600;
}

.ind-wall__team ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 18px;
}

.ind-wall__team li {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding-inline: 12px;
  border: 1px solid #232328;
  border-radius: 10px;
  background: #0d0d11;
  font-size: 13px;
  line-height: 18px;
  color: #e4e4ea;
}

.ind-wall__team li i {
  width: 12px;
  height: 12px;
  flex: none;
  border: 1.5px solid var(--dot);
  border-radius: 50%;
  background: color-mix(in srgb, var(--dot) 20%, transparent);
}

.ind-wall__between {
  position: relative;
  width: 64px;
  flex: none;
}

.ind-wall__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 31px;
  width: 2px;
  background: linear-gradient(in oklab 180deg, #cca0ff, #ffa0d4);
  transform-origin: center top;
}

.ind-wall__lock {
  position: absolute;
  top: 96px;
  left: 15px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid #ffa0d4;
  border-radius: 50%;
  background: var(--color-black);
}

.ind-wall__lock svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #ffa0d4;
  stroke-width: 1.3;
}

.ind-wall__probe {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #96a8ff;
  box-shadow: 0 0 12px #96a8ff99;
  opacity: 0;
}

.ind-wall__note {
  text-wrap: pretty;
  flex: 1 1 0;
  min-width: 0;
  font-size: 13px;
  line-height: 18px;
  color: #a0a0a8;
}

/* The case for owning it. */
.ind-own {
  padding: 120px var(--gutter) 96px;
  background: var(--color-black);
  text-align: center;
}

.ind-own__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--own-gap);
  margin-top: var(--own-top, 84px);
  padding-right: var(--own-right, 0);
  text-align: left;
}

.ind-own__cube {
  width: var(--cube-w);
  height: var(--cube-h);
  flex: 0 1 auto;
  min-width: 0;
}

.ind-own__cube img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.accent-finance .ind-own__cube img,
.accent-government .ind-own__cube img {
  object-fit: contain;
}

.ind-own__list {
  width: var(--own-list);
  flex: 0 1 auto;
  min-width: 0;
}

.ind-own__list li {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-block: 30px;
  border-top: 1px solid var(--color-line-faq);
  font-size: 24px;
  line-height: 31px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.ind-own__list li:last-child {
  border-bottom: 1px solid var(--color-line-faq);
}

/* Common questions. */
.ind-faq {
  padding: 72px var(--gutter) 48px;
  background: var(--color-black);
  text-align: center;
}

.ind-faq .faq {
  margin-top: 56px;
}

/* An answer and its link can run the full width of the row, as in Paper. */
.ind-faq .faq__answer-inner {
  max-width: none;
}

.ind-faq .faq__answer-inner .link {
  margin-left: 2px;
}

.ind-faq .faq__answer-inner .faq__link--own-line {
  margin-left: 0;
}

.accent-legal .ind-faq .faq__answer-inner {
  max-width: 780px;
}

/* Closing, over its own full-bleed picture. */
.ind-closing {
  min-height: 672px;
  padding: 200px var(--gutter) 120px;
}

.ind-closing .closing__media {
  position: absolute;
  inset: 0;
}

.ind-closing .closing__headline {
  margin-top: 0;
}

.ind-closing .closing__actions {
  margin-top: 32px;
}

/* A bento folds to two columns before its small tiles get too narrow for their titles, and
   its tiles never stretch past their desktop size: the grid is capped on a tablet, and
   wider than that every tile takes one column. */
@media (max-width: 1339px) {
  .ind-bento {
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ind-bento__tile {
    grid-area: auto;
    grid-column: var(--span-t, auto);
    height: var(--h-t);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .ind-bento {
    width: min(720px, calc(100% - 2 * var(--ind-inset)));
    margin-inline: auto;
  }

  /* Finance's file list: the phone height and its first three files. */
  .ind-bento__tile--ledger {
    height: var(--h-m);
  }

  .ind-ledger__row:nth-child(n + 4) {
    display: none;
  }
}

/* Government's Models and Network tiles need the width of a full row, so its capped grid
   carries on, centered. */
@media (min-width: 768px) and (max-width: 1339px) {
  .accent-government .ind-bento {
    width: min(720px, calc(100% - 2 * var(--ind-inset)));
    margin-inline: auto;
  }
}

/* Finance keeps its desktop grid down to 1200px, just narrower. */
@media (min-width: 1200px) and (max-width: 1339px) {
  .accent-finance .ind-bento {
    grid-template-rows: var(--bento-rows);
    grid-template-columns: var(--bento-cols);
  }

  .accent-finance .ind-bento__tile {
    grid-area: var(--area);
    height: auto;
  }
}

/* Government's two smaller tiles stack before their titles run out of room. */
@media (max-width: 899px) {
  .ind-bento__tile--shield,
  .ind-bento__tile--usage {
    grid-column: 1 / -1;
  }
}

/* Below the desktop header: the hero is as tall as its content, the picture stays its true
   size and fades out at the bottom, and the next section starts a standard gap below. */
@media (max-width: 1023px) {
  .ind-hero {
    padding: calc(var(--header-h) + 64px) var(--gutter) var(--section-pad);
  }

  .ind-hero__image {
    mask-image: linear-gradient(#000 calc(100% - 160px), transparent);
  }

  .ind-gem {
    padding-top: var(--section-pad);
  }
}

/* Past a phone the desktop picture shows at its true size, centered from the top. */
@media (min-width: 481px) and (max-width: 1023px) {
  .ind-hero__image picture,
  .ind-closing__image picture {
    height: auto;
  }

  .ind-hero__image img,
  .ind-closing__image img {
    width: 1440px;
    max-width: none;
    height: auto;
    margin-left: calc((100% - 1440px) / 2);
  }

  /* GEM tabs: one row, as wide as the panel under it, scrolling if the labels don't fit. */
  .ind-gem__tabs .tabs__list {
    display: flex;
    width: 100%;
    max-width: 960px;
  }

  .ind-gem__tabs .tabs__tab {
    flex: 1 0 auto;
  }
}

/* The Cube and its list stack before they get squeezed. */
@media (max-width: 1023px) {
  .ind-own__row {
    flex-direction: column;
    gap: 48px;
    padding-right: 0;
  }

  .ind-own__list {
    width: min(var(--own-list), 100%);
  }
}

@media (max-width: 767px) {
  .ind-hero {
    padding-top: 120px;
  }

  .ind-hero__icon .ind-icon {
    width: 56px;
    height: 56px;
  }

  .ind-hero h1,
  .ind-hero__sub {
    margin-top: 20px;
  }

  .ind-hero__sub {
    font-size: 18px;
    line-height: 26px;
    color: var(--color-text-muted);
  }

  .ind-hero__actions {
    margin-top: 28px;
  }

  .ind-gem {
    padding-bottom: 72px;
  }

  .ind-gem__sub {
    margin-top: 16px;
    font-size: 18px;
    line-height: 26px;
  }

  .ind-gem__tabs {
    margin-top: 40px;
  }

  .ind-panel--page {
    min-height: 0;
    margin-top: 16px;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 4%),
      0 30px 60px -20px rgb(0 0 0 / 50%),
      0 8px 24px -8px rgb(0 0 0 / 40%);
  }

  .ind-panel--page .ind-panel__header {
    height: 46px;
    padding: 0 18px;
  }

  .ind-panel--page .ind-panel__body {
    padding: 18px 18px 20px;
  }

  .ind-panel--page .ind-panel__q p {
    font-size: 13px;
    line-height: 19px;
  }

  .ind-panel--page .ind-panel__a {
    font-size: 13px;
    line-height: 20px;
  }

  .ind-panel--page .ind-table {
    --ind-cols: var(--cols-m);
    margin-top: 22px;
  }

  .ind-panel--page .ind-table__head {
    height: 32px;
  }

  .ind-panel--page .ind-table td:first-child {
    text-wrap: balance;
  }

  .ind-loss {
    margin-top: 14px;
  }

  .ind-loss__legend {
    gap: 14px;
    font-size: 10px;
    line-height: 13px;
  }

  .ind-loss__numbers {
    font-size: 11px;
    line-height: 14px;
  }

  .ind-loss__bar {
    margin-top: 8px;
  }

  .ind-work {
    padding: 48px 0 64px;
  }

  .ind-work .carousel,
  .ind-bento {
    margin-top: 32px;
  }

  .ind-work .carousel__title {
    line-height: 25px;
  }

  .ind-work--bento {
    padding: 64px 0 72px;
  }

  .ind-bento {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .ind-bento__tile {
    grid-column: auto;
    height: var(--h-m);
    padding: 24px;
  }

  .ind-bento__title {
    font-size: 20px;
    line-height: 25px;
  }

  .ind-bento__label {
    font-size: 10px;
    line-height: 13px;
  }

  .ind-bento__tile--ledger {
    gap: 20px;
    padding: 24px;
  }

  .ind-ledger {
    border-radius: 12px;
  }

  .ind-ledger__head {
    height: 40px;
    padding-inline: 12px;
    font-size: 12px;
    line-height: 16px;
  }

  .ind-ledger__head span:last-child {
    font-size: 10px;
    line-height: 13px;
  }

  .ind-ledger__row {
    gap: 10px;
    padding-inline: 12px;
  }

  .ind-ledger__row--wide {
    display: none;
  }

  .ind-ledger__row:has(+ .ind-ledger__row--wide) {
    border-bottom: 0;
  }

  .ind-ledger__icon {
    width: 14px;
    height: 16px;
  }

  .ind-ledger__name {
    font-size: 13px;
    line-height: 17px;
  }

  .ind-ledger__kind {
    font-size: 10px;
    line-height: 13px;
  }

  .ind-bento__tile--backtests {
    padding: 24px;
  }

  .ind-bt__top {
    row-gap: 8px;
  }

  .ind-bt__line {
    grid-area: 2 / 1 / 3 / 3;
    flex-direction: column;
    gap: 0;
    font-size: 14px;
    line-height: 20px;
  }

  .ind-bt__zero {
    grid-area: 1 / 2;
    font-size: 64px;
    line-height: 64px;
  }

  .ind-bt__dollar {
    margin-top: 5px;
    padding-right: 2px;
    font-size: 38px;
    line-height: 38px;
  }

  .ind-bt__weeks {
    font-size: 10px;
    line-height: 13px;
  }

  .ind-nightly__clock {
    padding-top: 12px;
    font-size: 44px;
    line-height: 48px;
  }

  .ind-nightly__clock small {
    font-size: 17px;
    line-height: 21px;
  }

  .ind-nightly__track {
    margin-top: 12px;
  }

  .ind-nightly__foot {
    font-size: 10px;
    line-height: 13px;
  }

  .ind-tuning {
    gap: 8px;
  }

  .ind-tuning__step {
    height: 34px;
  }

  .ind-vos {
    top: var(--top-m);
    right: 18px;
    left: 18px;
    border-radius: 12px;
  }

  .ind-vos__head {
    height: 40px;
    padding-inline: 14px;
    font-size: 12px;
    line-height: 16px;
  }

  .ind-vos__head span:last-child {
    font-size: 10px;
    line-height: 13px;
  }

  .ind-tag {
    height: 18px;
    padding-inline: 6px;
    border-radius: 5px;
    font-size: 10px;
    line-height: 13px;
  }

  .ind-tag--pill {
    height: auto;
    padding: 4px 7px;
  }

  .ind-tag--off {
    gap: 4px;
  }

  .ind-tag--off svg {
    width: 9px;
    height: 10px;
  }

  .ind-tag--bento {
    height: auto;
    padding: 4px 6px;
  }

  /* The kind and the tag share the file's second line. */
  .ind-file {
    grid-template-columns: 14px minmax(0, 1fr) auto;
    grid-template-rows: 17px 18px;
    column-gap: 10px;
    row-gap: 3px;
    height: 50px;
    padding-inline: 14px;
  }

  .ind-file__icon {
    width: 14px;
    height: 16px;
  }

  .ind-file__name {
    grid-area: 1 / 2 / 1 / 4;
    font-size: 13px;
    line-height: 17px;
  }

  .ind-file__kind {
    align-self: center;
    font-size: 10px;
    line-height: 13px;
  }

  .ind-file__state {
    grid-area: 2 / 3;
  }

  .ind-file__working {
    gap: 5px;
    padding-inline: 6px;
    font-size: 10px;
    line-height: 13px;
  }

  .ind-file__working i {
    width: 8px;
    height: 8px;
  }

  .ind-meter {
    top: 28px;
    right: 28px;
    left: 28px;
  }

  .ind-meter__zero {
    font-size: 72px;
    line-height: 72px;
  }

  .ind-meter__dollar {
    margin-top: 3px;
    font-size: 43px;
    line-height: 43px;
  }

  .ind-meter__tokens {
    gap: 4px;
    margin-top: 8px;
    font-size: 15px;
    line-height: 20px;
  }

  .ind-meter__jobs {
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
  }

  .ind-meter__job {
    gap: 6px;
    font-size: 13px;
    line-height: 18px;
  }

  .ind-meter__track {
    height: 8px;
    border-radius: 4px;
  }

  .ind-meter__track i {
    border-radius: 4px;
  }

  .ind-night__wide {
    display: none;
  }

  .ind-night__dial {
    display: block;
  }

  .ind-night__arc {
    position: absolute;
    top: 76px;
    left: 46px;
    display: block;
  }

  .ind-night__clock {
    position: absolute;
    top: 142px;
    right: 0;
    left: 0;
    justify-content: center;
    gap: 6px;
    padding-bottom: 0;
    font-size: 52px;
    line-height: 56px;
  }

  .ind-night__clock small {
    font-size: 20px;
    line-height: 24px;
  }

  .ind-night__card {
    position: absolute;
    right: 18px;
    bottom: 32px;
    left: 18px;
    padding: 14px 16px 16px;
    border: 1px solid #232328;
    border-radius: 12px;
    background: #0d0d11;
  }

  .ind-night__card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
  }

  .ind-status {
    gap: 6px;
    font-size: 10px;
    line-height: 13px;
    font-weight: 400;
  }

  .ind-status i {
    width: 6px;
    height: 6px;
  }

  .ind-night__detail {
    margin-top: 2px;
    font-size: 12px;
    line-height: 16px;
    color: var(--color-text-quiet);
  }

  .ind-night__card .ind-night__track {
    height: 6px;
    margin-top: 12px;
    border-radius: 3px;
  }

  .ind-night__card .ind-night__facts {
    justify-content: space-between;
    margin-top: 10px;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 13px;
    color: var(--color-text-quiet);
  }

  .ind-night__card .ind-night__facts span {
    gap: 6px;
  }

  .ind-night__card .ind-night__facts b {
    font-weight: 400;
  }

  .ind-person {
    gap: 10px;
    height: 48px;
    padding-inline: 14px;
  }

  .ind-person__avatar {
    width: 20px;
    height: 20px;
  }

  .ind-person__name {
    font-size: 13px;
    line-height: 18px;
  }

  .ind-sets {
    top: 96px;
    right: 18px;
    left: 18px;
    gap: 10px;
  }

  .ind-set {
    gap: 8px;
    padding: 14px 16px;
    border-radius: 12px;
  }

  .ind-set__label {
    gap: 7px;
    font-size: 10px;
    line-height: 13px;
  }

  .ind-set__label svg {
    width: 13px;
    height: 13px;
  }

  .ind-set__tag {
    padding-inline: 6px;
  }

  .ind-set__name {
    font-size: 15px;
    line-height: 20px;
  }

  .ind-arch {
    top: 32px;
    right: 18px;
    left: 18px;
  }

  .ind-arch__search {
    gap: 8px;
    height: auto;
    padding: 10px 12px;
    border-radius: 10px;
  }

  .ind-arch__search svg {
    width: 13px;
    height: 13px;
    stroke-width: 1.6;
  }

  .ind-arch__query {
    font-size: 12px;
    line-height: 16px;
  }

  .ind-arch__count {
    padding-top: 12px;
    font-size: 10px;
    line-height: 13px;
  }

  .ind-arch__grid {
    margin-top: 0;
  }

  .ind-arch__grid--wide,
  .ind-runs__bars--wide,
  .ind-lab--wide {
    display: none;
  }

  .ind-arch__grid--phone,
  .ind-runs__bars--phone,
  .ind-lab--phone {
    display: block;
  }

  .ind-runs {
    top: 112px;
    right: 18px;
    left: 18px;
    display: block;
  }

  .ind-runs__total {
    gap: 8px;
    width: auto;
  }

  .ind-runs__zero {
    justify-content: center;
    font-size: 72px;
    line-height: 72px;
  }

  .ind-runs__dollar {
    margin-top: 3px;
    padding-right: 3px;
    font-size: 43px;
    line-height: 43px;
  }

  .ind-runs__line {
    display: flex;
    justify-content: center;
    gap: 4px;
    font-size: 14px;
    line-height: 20px;
  }

  .ind-runs__chart {
    gap: 8px;
    width: auto;
    margin-top: 24px;
  }

  .ind-runs__weeks {
    font-size: 10px;
    line-height: 13px;
  }

  .ind-lab__label {
    top: var(--y-m);
    left: var(--x-m);
    font-size: 10px;
    line-height: 13px;
  }

  .ind-panel--page .ind-tiles {
    gap: 8px;
  }

  .ind-panel--page .ind-tile {
    padding: 10px;
  }

  .ind-panel--page .ind-tile__label {
    font-size: 10px;
    line-height: 13px;
    letter-spacing: 0.06em;
  }

  .ind-panel--page .ind-tile__value {
    font-size: 20px;
    line-height: 26px;
  }

  .ind-table--cells .ind-table__head {
    font-size: 10px;
    line-height: 13px;
  }

  .ind-table--cells .ind-table__row {
    font-size: 13px;
    line-height: 18px;
  }

  .ind-panel--page .ind-table--discovery {
    --ind-cols: minmax(0, 1fr) 120px;
  }

  .ind-table--discovery th:nth-child(2),
  .ind-table--discovery td:nth-child(2) {
    display: none;
  }

  .ind-cell-tag {
    font-size: 11px;
    line-height: 14px;
  }

  .ind-cell-who {
    font-size: 10px;
    line-height: 13px;
  }

  .ind-cell-quiet {
    font-size: 12px;
    line-height: 16px;
  }

  /* Phones: the deviation sits under its clause. */
  .ind-panel--page .ind-table--contracts {
    --ind-cols: 72px minmax(0, 1fr) auto;
    --row-h: 48px;
  }

  .ind-table--contracts th:nth-child(3) {
    display: none;
  }

  .ind-table--contracts .ind-table__row {
    grid-template-rows: auto auto;
    column-gap: 6px;
    padding-block: 7px;
  }

  .ind-table--contracts td:nth-child(1),
  .ind-table--contracts td:nth-child(4) {
    grid-row: 1 / 3;
  }

  .ind-table--contracts td:nth-child(2) {
    grid-area: 1 / 2;
  }

  .ind-table--contracts td:nth-child(3) {
    grid-area: 2 / 2;
  }

  .ind-table--contracts td:nth-child(4) {
    grid-column: 3;
  }

  /* Phones: the topic runs across, its two answers below it. */
  .ind-panel--page .ind-table--depositions {
    --ind-cols: minmax(0, 1fr) minmax(0, 1fr);
    --row-h: 62px;
  }

  .ind-table--depositions th:first-child {
    display: none;
  }

  .ind-table--depositions .ind-table__row {
    row-gap: 2px;
    padding-block: 6px;
  }

  .ind-table--depositions td:first-child {
    grid-column: 1 / -1;
  }

  .ind-panel--page .ind-table--briefs {
    --ind-cols: minmax(0, 1fr) 34px auto;
    --row-h: 46px;
    margin-top: 20px;
  }

  .ind-table--briefs .ind-table__row {
    column-gap: 8px;
  }

  .ind-tag--chip {
    padding: 3px 6px;
    border-radius: 5px;
    font-size: 10px;
    line-height: 13px;
  }

  .ind-find {
    top: 120px;
    right: 18px;
    left: 18px;
    border-radius: 12px;
  }

  .ind-find__bar {
    gap: 8px;
    height: auto;
    padding: 10px;
  }

  .ind-find__bar svg {
    width: 13px;
    height: 13px;
    stroke-width: 1.6;
  }

  .ind-find .ind-arch__query {
    font-size: 12px;
    line-height: 16px;
  }

  .ind-find__count {
    padding: 10px 10px 4px;
    font-size: 10px;
    line-height: 13px;
    letter-spacing: 0.06em;
  }

  .ind-find__row {
    gap: 6px;
    height: 40px;
    padding-inline: 10px;
  }

  .ind-find__icon {
    width: 13px;
    height: 15px;
    stroke-width: 1.6;
  }

  .ind-find__file {
    gap: 2px;
  }

  .ind-find__name {
    font-size: 12px;
    line-height: 16px;
  }

  .ind-find__meta {
    font-size: 10px;
    line-height: 13px;
  }

  .ind-find .ind-tag--chip {
    padding: 3px 5px;
  }

  .ind-tile-foot {
    right: 32px;
    bottom: 32px;
    left: 32px;
    align-items: flex-start;
    gap: 10px;
    padding-top: 12px;
  }

  .ind-chron {
    display: none;
  }

  .ind-chron__list {
    position: absolute;
    top: 110px;
    left: 28px;
    display: block;
  }

  .ind-chron__row {
    display: flex;
    align-items: flex-start;
  }

  .ind-chron__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 12px;
    flex: none;
    margin-right: 10px;
  }

  .ind-chron__pip {
    width: 12px;
    height: 12px;
    flex: none;
    border: 1.5px solid #cca0ff;
    border-radius: 50%;
    background: #cca0ff26;
  }

  .ind-chron__row.is-hot .ind-chron__pip {
    border-color: #ffa0d4;
    background: #ffa0d433;
    box-shadow: 0 0 12px #ffa0d466;
  }

  .ind-chron__tick {
    width: 1.5px;
    height: 26px;
    background: #cca0ff59;
    transform-origin: center top;
  }

  .ind-chron__row:last-child .ind-chron__tick {
    display: none;
  }

  .ind-chron__row .ind-chron__date,
  .ind-chron__row .ind-chron__what {
    display: flex;
    align-items: center;
    height: 12px;
    white-space: nowrap;
  }

  .ind-chron__row .ind-chron__date {
    width: 42px;
    flex: none;
    margin-right: 8px;
    font-size: 11px;
    line-height: 14px;
  }

  .ind-chron__row .ind-chron__what {
    font-size: 12px;
    line-height: 16px;
  }

  .ind-chron__foot {
    padding-top: 0;
    border-top: 0;
  }

  .ind-chron__built,
  .ind-chron__sources {
    display: none;
  }

  .ind-chron__foot .ind-tag--chip {
    padding: 5px 9px;
  }

  .ind-pages {
    top: 32px;
    right: 32px;
    left: 32px;
  }

  .ind-pages__count {
    font-size: 64px;
    line-height: 64px;
  }

  .ind-pages__label {
    padding-top: 6px;
    font-size: 15px;
    line-height: 20px;
  }

  .ind-pages__bar {
    height: 10px;
    margin-top: 22px;
    border-radius: 5px;
  }

  .ind-pages__legend {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 5px;
    padding-top: 12px;
  }

  .ind-pages__legend li {
    width: auto;
  }

  .ind-pages__legend span {
    font-size: 12px;
    line-height: 16px;
  }

  .ind-pages__legend b {
    font-size: 11px;
    line-height: 14px;
  }

  .ind-wall {
    top: 106px;
    right: 32px;
    left: 32px;
  }

  .ind-wall__team {
    width: 114px;
  }

  .ind-wall__matter {
    font-size: 10px;
    line-height: 13px;
    letter-spacing: 0.06em;
  }

  .ind-wall__role {
    padding-top: 4px;
    font-size: 13px;
    line-height: 18px;
  }

  .ind-wall__team ul {
    gap: 6px;
    padding-top: 10px;
  }

  .ind-wall__team li {
    gap: 7px;
    height: 30px;
    padding-inline: 8px;
    border-radius: 8px;
    font-size: 12px;
    line-height: 16px;
  }

  .ind-wall__team li i {
    width: 9px;
    height: 9px;
  }

  .ind-wall__between {
    width: 40px;
  }

  .ind-wall__line {
    left: 19px;
  }

  .ind-wall__lock {
    top: 58px;
    left: 7px;
    width: 26px;
    height: 26px;
  }

  .ind-wall__lock svg {
    width: 11px;
    height: 11px;
    stroke-width: 1.5;
  }

  .ind-wall__note {
    font-size: 12px;
    line-height: 16px;
  }

  .ind-panel--page .ind-chart--page {
    padding: 0 0 6px;
  }

  /* The panel keeps Paper's height on phones, so each report shows its name and result. */
  .ind-docs {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 14px;
  }

  .ind-doc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 8px;
    padding: 9px 12px;
    border-radius: 10px;
  }

  .ind-doc__id {
    grid-column: 1 / -1;
    height: 13px;
    font-size: 10px;
    line-height: 13px;
  }

  .ind-doc__name {
    font-size: 13px;
    line-height: 16px;
  }

  .ind-doc__quote {
    display: none;
  }

  .ind-doc__result {
    margin-top: 0;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: 0;
  }

  .ind-docs__more {
    padding-top: 0;
    font-size: 10px;
  }

  /* Both files stay, one above the other, showing their first five lines. */
  .ind-code {
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
  }

  .ind-code__file {
    flex: none;
    border-radius: 10px;
  }

  .ind-code__arrow,
  .ind-code__line:nth-child(n + 6),
  .ind-code__dot--first {
    display: none;
  }

  .ind-code__name {
    height: 24px;
    padding-inline: 10px;
    font-size: 10px;
    line-height: 13px;
  }

  .ind-code__lines {
    padding-block: 4px;
  }

  .ind-code__line {
    height: 13px;
    font-size: 9.5px;
    line-height: 13px;
  }

  .ind-code__no {
    width: 20px;
    padding-right: 6px;
  }

  .ind-code__check {
    flex-wrap: wrap;
    gap: 2px 6px;
    margin-top: 10px;
    font-size: 12px;
  }

  .ind-gantt {
    margin-top: 14px;
    border-radius: 10px;
  }

  .ind-gantt__file {
    height: 36px;
    padding-inline: 12px;
  }

  .ind-gantt__pages {
    font-size: 10px;
    line-height: 13px;
  }

  .ind-gantt__rows {
    padding: 4px 12px 8px;
  }

  .ind-gantt__months {
    height: 18px;
  }

  .ind-gantt__months .ind-gantt__name {
    display: none;
  }

  .ind-gantt__months .ind-gantt__track {
    flex: 1 1 0;
  }

  .ind-gantt__months .ind-gantt__track span {
    top: 4px;
  }

  .ind-gantt__row {
    display: grid;
    grid-template-rows: 16px 14px;
    grid-template-columns: minmax(0, 1fr) auto;
    height: 34px;
    align-content: center;
  }

  .ind-gantt__name {
    width: auto;
    font-size: 12px;
  }

  .ind-gantt__status {
    width: auto;
    margin-left: 0;
    font-size: 10px;
    line-height: 16px;
  }

  .ind-gantt__track {
    grid-area: 2 / 1 / 3 / 3;
    height: 14px;
  }

  .ind-gantt__bar {
    top: 3px;
    height: 8px;
    border-radius: 2px;
  }

  .ind-bento__tile--models,
  .ind-bento__tile--shield,
  .ind-bento__tile--usage,
  .ind-bento__tile--network {
    padding: 24px;
  }

  .ind-bento__tile--models {
    gap: 20px;
  }

  .ind-bento__tile--network {
    flex-direction: column;
    gap: 20px;
  }

  .ind-tag--small {
    gap: 4px;
    height: auto;
    padding: 4px 7px;
  }

  .ind-win__head {
    padding-inline: 12px;
  }

  .ind-win__head span:last-child {
    font-size: 10px;
    line-height: 12px;
  }

  .ind-model {
    padding-inline: 12px;
    font-size: 12px;
  }

  .ind-model__maker {
    width: 70px;
  }

  .ind-model__size {
    display: none;
  }

  .ind-model__state {
    width: 76px;
  }

  .ind-shield .ind-bento__label,
  .ind-usage .ind-bento__label {
    line-height: 12px;
  }

  .ind-shield__from {
    font-size: 10px;
  }

  .ind-usage__total {
    gap: 8px;
  }

  .ind-usage__count {
    font-size: 44px;
    line-height: 44px;
  }

  .ind-usage__bars {
    --bars-h: 56px;
    height: 56px;
  }

  .ind-usage__foot {
    font-size: 10px;
    line-height: 12px;
  }

  .ind-usage__cost {
    gap: 6px;
  }

  .ind-net__text {
    width: auto;
  }

  .ind-net__note {
    display: none;
  }

  .ind-net__row {
    flex: 1 1 0;
    height: auto;
    padding-inline: 12px;
  }

  .ind-own {
    padding: 72px var(--gutter) 48px;
  }

  .ind-own__row {
    gap: var(--own-gap-m, 48px);
    margin-top: 40px;
  }

  .ind-own__cube {
    width: var(--cube-w-m);
    height: var(--cube-h-m);
  }

  .ind-own__list {
    width: 326px;
    max-width: 100%;
  }

  .ind-own__list li {
    gap: 16px;
    padding-block: 22px;
    font-size: 18px;
    line-height: 24px;
  }

  .ind-faq {
    padding: 48px var(--gutter) 32px;
  }

  .ind-faq .faq {
    margin-top: 56px;
  }

  .ind-closing {
    min-height: 0;
    padding: 128px var(--gutter) 120px;
  }

  .accent-legal .ind-closing {
    min-height: 542px;
  }

  .ind-closing .closing__sub {
    margin-top: 20px;
  }

  .ind-closing .closing__actions {
    margin-top: 28px;
  }
}

/* A phone wider than Paper's: the closing grows with the picture, so its fade still ends inside. */
@media (min-width: 391px) and (max-width: 480px) {
  .ind-closing,
  .accent-legal .ind-closing {
    min-height: calc(568 / 390 * 100vw);
  }
}

/* Past a phone the closing shows the desktop background at its full height. */
@media (min-width: 481px) and (max-width: 767px) {
  .ind-closing,
  .accent-legal .ind-closing {
    min-height: 672px;
  }
}

@media (max-width: 389px) {
  .ind-own__list li {
    text-wrap: balance;
  }

  /* $0 gives way so the title beside it keeps its two lines. */
  .ind-bt__zero {
    font-size: 52px;
    line-height: 52px;
  }

  .ind-bt__dollar {
    margin-top: 4px;
    font-size: 31px;
    line-height: 31px;
  }

}

/* Finance GEM results, one kind per tab (specs/finance/). Teal leads; lavender only on the
   most important flagged item. */
.ind-curve {
  margin-top: 26px;
}

.ind-curve__kpis {
  display: flex;
  gap: 56px;
}

.ind-curve__kpi {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ind-curve__label,
.ind-curve__axis,
.ind-letter__label {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.08em;
  color: var(--color-text-quiet);
  white-space: nowrap;
}

.ind-curve__value {
  font-size: 28px;
  line-height: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.ind-curve__plot {
  position: relative;
  height: 240px;
  margin-top: 18px;
}

@media (min-width: 1024px) {
  .ind-curve__plot {
    height: 132px;
  }
}

.ind-curve__plot svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ind-curve__line {
  stroke-width: 2.6;
}

.ind-curve__low,
.ind-curve__end {
  position: absolute;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
}

.ind-curve__low {
  left: 20%;
  top: 86.125%;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border: 2px solid #cca0ff;
  background: #040407;
}

.ind-curve__end {
  left: 100%;
  top: 10%;
  background: #7adeef;
}

.ind-curve__axis {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.ind-curve__axis-low {
  position: absolute;
  left: 18.1%;
  color: #cca0ff;
}

.ind-limits {
  margin-top: 24px;
}

/* The top rule arrives with the first row, so nothing of the result shows early. */
.ind-limit:first-child {
  border-top: 1px solid #222228;
}

.ind-limit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 130px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #222228;
  text-align: left;
  font-size: 15px;
  line-height: 22px;
  color: var(--color-text);
}

.ind-limit__why {
  margin-top: 3px;
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-quiet);
}

.ind-limit__meter {
  position: relative;
  width: 120px;
  height: 6px;
}

.ind-limit__meter i {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: var(--limit);
  transform-origin: left;
}

.ind-limit__meter b {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 1.5px;
  background: var(--color-text);
}

.ind-limit__tag,
.ind-letter__tag {
  justify-self: end;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--tag-c) 35%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--tag-c) 8%, transparent);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--tag-c);
  white-space: nowrap;
}

.ind-limit__tag {
  --tag-c: var(--limit);
}

.ind-letter__tag {
  --tag-c: #7adeef;
}

.ind-letter,
.ind-clause {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid #232328;
  border-radius: 12px;
  background: #0d0d11;
  text-align: left;
}

.ind-letter {
  margin-top: 22px;
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text-muted);
}

.ind-letter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 6px;
}

.ind-letter__flag {
  margin-inline: -8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgb(122 222 239 / 10%);
  color: var(--color-text);
}

.ind-clauses {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
  text-align: left;
}

.ind-clauses__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ind-clause__title {
  font-size: 15px;
  line-height: 22px;
  font-weight: 500;
  color: var(--color-text);
}

.ind-clause__text {
  font-size: 15px;
  line-height: 24px;
  color: var(--color-text-muted);
}

.ind-clause__flag,
.ind-clause__diff {
  font-weight: 500;
}

.ind-clause__flag {
  color: #cca0ff;
}

.ind-clause__diff {
  color: #7adeef;
}

@media (max-width: 767px) {
  .ind-curve {
    margin-top: 18px;
  }

  .ind-curve__kpis {
    justify-content: space-between;
    gap: 8px;
  }

  .ind-curve__kpi {
    gap: 4px;
  }

  .ind-curve__label,
  .ind-curve__axis {
    font-size: 9px;
    line-height: 12px;
  }

  .ind-curve__value {
    font-size: 20px;
    line-height: 28px;
  }

  .ind-curve__plot {
    height: 130px;
  }

  .ind-curve__line {
    stroke-width: 2;
  }

  .ind-limits {
    margin-top: 16px;
  }

  .ind-limit {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 8px;
    padding: 12px 0;
    font-size: 14px;
    line-height: 20px;
  }

  .ind-limit__name {
    grid-column: 1 / -1;
  }

  .ind-limit__meter {
    width: 96px;
  }

  .ind-limit__tag {
    font-size: 11px;
    line-height: 15px;
  }

  .ind-letter,
  .ind-clause {
    gap: 8px;
    padding: 14px;
  }

  .ind-letter {
    margin-top: 18px;
    font-size: 13px;
    line-height: 20px;
  }

  .ind-letter__label {
    font-size: 10px;
    line-height: 13px;
  }

  .ind-letter__head {
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 2px;
  }

  .ind-letter__tag {
    font-size: 10px;
    line-height: 14px;
  }

  .ind-clauses {
    margin-top: 16px;
  }

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

  .ind-clause__title {
    font-size: 14px;
  }

  .ind-clause__text {
    font-size: 13px;
    line-height: 20px;
  }

  /* Healthcare's study search on a phone: all five rows fit above the title. */
  .ind-find--tall {
    top: var(--top-m);
    right: 18px;
    left: 18px;
  }

  .ind-find--tall .ind-find__bar {
    height: auto;
    padding-block: 8px;
  }

  .ind-find--tall .ind-find__count {
    padding-block: 6px 4px;
  }

  .ind-find--tall .ind-find__row {
    height: 38px;
    padding-block: 0;
  }

  .ind-find--tall .ind-arch__query,
  .ind-find--tall .ind-find__name {
    font-size: 12px;
    line-height: 16px;
  }

  .ind-find--tall .ind-find__name {
    font-size: 13px;
    line-height: 17px;
  }

  .ind-find--tall .ind-find__file {
    gap: 0;
  }

  .ind-find--tall .ind-find__meta {
    font-size: 8px;
    line-height: 11px;
  }
}
/* The line-count rule (CLAUDE.md section 4), checked at every phone width by
   test-new/browser/line-count.spec.mjs. These headlines scale with their column on phones, so
   they wrap the same way at every width. The divisor is how many ems the column must hold. */
@media (max-width: 767px) {
  .home-lineup .t-headline,
  .home-industries .t-headline {
    font-size: min(var(--headline-size), calc((100vw - 2 * var(--gutter)) / 9.6));
    line-height: 1.14;
  }

  .ind-gem .t-headline {
    font-size: min(var(--headline-size), calc((100vw - 2 * var(--gutter)) / 10.1));
    line-height: 1.14;
  }

  .ind-closing .closing__headline {
    font-size: min(var(--display-size), calc((100vw - 2 * var(--gutter)) / 7.85));
    line-height: 1.09;
  }

  .pd-closing .closing__headline {
    font-size: min(var(--display-size), calc((100vw - 2 * var(--gutter)) / 7.1));
    line-height: 1.09;
  }

  .pd-power .t-display {
    font-size: min(var(--display-size), calc((100vw - 2 * var(--gutter)) / 6.8));
    line-height: 1.09;
  }

  .pd-hero__title {
    width: min(358px, 100%);
  }

  /* Subs under heroes and closings run a little wider than the column, to stay on two lines. */
  .closing__sub,
  .ind-hero__sub {
    width: min(calc(100vw - 40px), 640px);
    max-width: none;
    font-size: min(18px, calc((100vw - 40px) / 19.6));
    line-height: 1.44;
  }

  /* This one runs past the lines the browser will balance, so it scales with the column
     and wraps the same way at every phone width, with no stray last words. */
  .home-security .t-subhead-statement {
    font-size: min(21px, calc((100vw - 2 * var(--gutter)) / 18.1));
    line-height: 1.44;
    text-wrap: pretty;
  }

  .closing--plain .closing__sub {
    font-size: min(18px, calc((100vw - 40px) / 20.2));
  }

  .carousel__title,
  .ind-work .carousel__title {
    right: 10px;
    font-size: 19px;
    line-height: 24px;
  }

  /* The four security tiles on the product pages: "inspects every file." takes 8.85em. The text
     never drops below 14px; below that its box widens into the tile's side padding instead. */
  .pd-security__tiles {
    --tile: calc((100vw - 2 * var(--gutter) - 8px) / 2);
    gap: 8px;
  }

  .pd-security__tile {
    padding-inline: clamp(8px, calc((var(--tile) - 124.5px) / 2), 14px);
  }

  .pd-security__tile p {
    font-size: clamp(14px, calc((var(--tile) - 28px) / 8.85), 16px);
    line-height: 1.375;
    text-wrap: balance;
  }

  .legal__body .legal-h2 {
    font-size: min(24px, calc((100vw - 48px) / 15.4));
  }
}