/* Site v2 company pages: /about, /culture, /enterprise, /generative-ai-security,
   /research and /smaug. Colours come from tokens.css only; everything else
   builds on the base.css components (round 4's cards, rows, heads and band). */

/* ---------- Shared by the company pages ---------- */
/* A headline that uses the whole hero column. */
.v2-co-title--wide {
  max-width: none;
}
/* Research: the scaling-curves art fills the hero behind its text. Like .v2-glow it sits at
   z-index -1 without opening a stacking context, so mix-blend-mode: multiply turns the art's white
   into the page glow behind it. Taller on tablets and phones, where the fan sits under the buttons. */
.v2-rs-curves {
  position: relative;
  min-height: 580px;
}
.v2-rs-curves .v2-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: 0;
  pointer-events: none;
}
.v2-rs-curves .v2-hero__media picture {
  display: contents;
}
.v2-rs-curves .v2-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  mix-blend-mode: multiply;
}
/* Dark: the art is drawn on white, so it is inverted (hue kept) onto the page's navy and screened, which
   drops its now-black ground into the navy and leaves the curves glowing. */
:root[data-ns2-theme="dark"] .v2-rs-curves .v2-hero__media {
  background: var(--paper);
}
:root[data-ns2-theme="dark"] .v2-rs-curves .v2-hero__media img {
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: screen;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-ns2-theme="light"]) .v2-rs-curves .v2-hero__media {
    background: var(--paper);
  }
  :root:not([data-ns2-theme="light"]) .v2-rs-curves .v2-hero__media img {
    filter: invert(1) hue-rotate(180deg);
    mix-blend-mode: screen;
  }
}
@media (max-width: 1023px) {
  .v2-rs-curves {
    min-height: 640px;
  }
}
@media (max-width: 599px) {
  .v2-rs-curves {
    min-height: 700px;
  }
}
/* Where the 21:9 hero plates crop: the culture photo a little low. */
.v2-co-crop-low img {
  object-position: 50% 55%;
}
/* Round 4's enterprise split: a title on the left, its copy on the right
   (the About mission, the research intro). */
.v2-co-split {
  display: grid;
  gap: var(--space-6);
}
.v2-co-split__title {
  max-width: 30ch;
}
.v2-co-split__body {
  max-width: 64ch;
  line-height: 1.65;
  color: var(--muted);
}
.v2-co-split__body > * + * {
  margin-top: 1em;
}
@media (min-width: 1024px) {
  .v2-co-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(40px, 6vw, 80px);
    align-items: start;
  }
}

/* ---------- About ---------- */
/* Products: one round 4 card per product, its name beside the copy, so the
   two descriptions (of very different lengths) never leave a card half empty. */
.v2-co-products {
  display: grid;
  gap: var(--space-4);
}
.v2-co-product > .v2-more {
  align-self: start;
}
@media (min-width: 720px) {
  .v2-co-product {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    grid-template-rows: auto 1fr;
    gap: var(--space-3) var(--col-gap);
    align-items: start;
  }
  .v2-co-product > .v2-h3 {
    grid-row: span 2;
  }
  .v2-co-product > .v2-card__text {
    max-width: 64ch;
  }
  .v2-co-product > .v2-more {
    grid-column: 2;
    justify-self: start;
  }
}
/* Investors: round 4 profile cards, the photo over the name, four across; two
   across (photo beside the name) on tablets, where three would leave the
   22nd card alone on its row. */
.v2-co-backers > .v2-backer {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--space-4);
}
@media (max-width: 719px) {
  .v2-co-backers > .v2-backer {
    padding: var(--space-5);
  }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .v2-co-backers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .v2-co-backers > .v2-backer {
    grid-template-columns: 48px minmax(0, 1fr);
  }
}

/* ---------- Culture ---------- */
/* The principle's icon, where round 4 puts a feature row's mono label. */
.v2-co-mark {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: contain;
}

/* ---------- Enterprise ---------- */
.v2-co-reel {
  aspect-ratio: 1258 / 500;
}
.v2-co-reel > img {
  display: none;
}
@media (max-width: 639px) {
  .v2-co-reel > video {
    display: none;
  }
  .v2-co-reel > img {
    display: block;
  }
}
/* Solutions: round 4's use-case rows, the solution on the left, its
   sub-solutions as chips on the right. */
.v2-co-sol {
  display: grid;
  gap: var(--space-4) var(--col-gap);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 1024px) {
  .v2-co-sol {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: center;
  }
}
.v2-co-sol__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.v2-co-sol__img {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--paper-2);
}
.v2-co-sol__link {
  text-decoration: none;
}
.v2-co-sol__link svg {
  display: inline-block;
  margin-left: var(--space-2);
  vertical-align: -0.12em;
  color: var(--muted);
  transition:
    transform var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.v2-co-sol__link:hover {
  color: var(--accent-ink);
}
.v2-co-sol__link:hover svg {
  color: var(--accent-ink);
  transform: translateX(3px);
}
.v2-co-sol__body {
  display: grid;
  gap: var(--space-3);
}
.v2-co-sol .v2-chip {
  min-height: 32px;
  padding-block: 5px;
  line-height: 1.3;
}
.v2-co-sol__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
}
.v2-co-sol__features li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  color: var(--muted);
}
.v2-co-sol__features img {
  flex: none;
  width: 24px;
  height: 24px;
  object-fit: contain;
}
/* Capabilities: round 4 cards, the icon over its name. */
.v2-co-cap {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: var(--space-4);
  padding: var(--space-6);
}
.v2-co-cap img {
  width: auto;
  height: 44px;
  object-fit: contain;
}

/* ---------- Generative AI security ---------- */
/* The governance diagram on its night plate keeps a reading width. */
.v2-co-governance img {
  max-width: 1000px;
  margin-inline: auto;
}
.v2-co-cell {
  display: grid;
  align-content: start;
  gap: var(--space-2);
  padding: var(--space-6);
}
.v2-co-cell__icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-3);
  object-fit: contain;
}
@media (max-width: 719px) {
  .v2-co-cells {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Research ---------- */
/* /smaug's intro: its paragraphs side by side on wide screens. */
.v2-co-intro {
  display: grid;
  gap: 1em;
  line-height: 1.65;
  color: var(--muted);
}
@media (min-width: 1024px) {
  .v2-co-intro {
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    column-gap: clamp(32px, 4vw, 56px);
  }
}
.v2-co-toc {
  display: grid;
  gap: var(--space-4);
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: var(--space-6);
  border-top: 1px solid var(--rule);
}
.v2-co-toc .v2-chip {
  padding-block: 5px;
  line-height: 1.3;
}
/* A long section subtitle, read as the section's first paragraph. */
.v2-co-rlead {
  max-width: 72ch;
  margin-top: calc(var(--space-6) * -1);
  margin-bottom: var(--space-10);
  line-height: 1.65;
  color: var(--muted);
}
/* Blocks inside a research section, hairlines between them. */
.v2-co-rbody {
  display: grid;
  gap: clamp(40px, 5vw, 64px);
}
.v2-co-rbody > * + * {
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--rule);
}
.v2-co-rcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  align-content: start;
  min-width: 0;
}
.v2-co-rcard__head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.v2-co-rcard__body {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}
.v2-co-rcard__body > .v2-rich {
  max-width: 72ch;
  line-height: 1.65;
  color: var(--muted);
}
.v2-co-eval > .v2-co-rcard__head {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--muted);
}
.v2-co-eval > .v2-co-rcard__head .v2-h3 {
  color: var(--ink);
}
@media (min-width: 1024px) {
  .v2-co-rcard--wide {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: calc(var(--col-gap) * 2);
    align-items: start;
  }
  .v2-co-rcard--wide > .v2-co-rcard__head {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    flex-direction: column;
    align-items: flex-start;
  }
}
.v2-co-rcard__aside {
  padding: var(--space-5);
  border-radius: var(--r);
  background: var(--paper-2);
}
.v2-co-eval__figure {
  margin-top: var(--space-6);
}
.v2-co-rbody .v2-caption {
  max-width: 96ch;
}

/* Evaluation and LiveBench tables (v2-table). */
.v2-co-table {
  min-width: 560px;
}
.v2-co-table th {
  vertical-align: bottom;
}
.v2-co-table td {
  vertical-align: middle;
  color: var(--ink-2);
}
.v2-co-table strong {
  font-weight: 600;
  color: var(--ink);
}
.v2-co-eval__group td {
  padding-top: var(--space-6);
  padding-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.v2-co-table td.v2-co-up,
.v2-co-table td.v2-co-up strong {
  color: var(--success);
}
.v2-co-table td.v2-co-down,
.v2-co-table td.v2-co-down strong {
  color: var(--danger);
}
.v2-co-table td.v2-co-par,
.v2-co-table td.v2-co-lb__base {
  color: var(--muted);
}
.v2-co-lb__overall td {
  border-top: 1px solid var(--rule-strong);
}
.v2-co-lb__bars {
  width: 32%;
  min-width: 140px;
}
.v2-co-bar {
  display: block;
}
.v2-co-bar + .v2-co-bar {
  margin-top: 3px;
}
.v2-co-bar__track {
  position: relative;
  display: block;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--paper-3);
}
.v2-co-bar__track > span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  border-radius: 3px;
}
/* The model in round 4's purple, its base in zinc. */
.v2-co-bar--model .v2-co-bar__track > span,
.v2-co-legend__model {
  background: var(--accent);
}
.v2-co-bar--base .v2-co-bar__track > span,
.v2-co-legend__base {
  background: var(--rule-strong);
}
.v2-co-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  line-height: 1.45;
  color: var(--muted);
}
.v2-co-legend i {
  display: inline-block;
  width: 14px;
  height: 6px;
  margin-right: var(--space-2);
  border-radius: 3px;
  vertical-align: middle;
}
@media (max-width: 639px) {
  .v2-co-table {
    min-width: 0;
  }
  .v2-co-table th,
  .v2-co-table td {
    padding-right: var(--space-2);
  }
  .v2-co-table th:last-child,
  .v2-co-table td:last-child {
    padding-right: 0;
  }
  .v2-co-lb__bars {
    display: none;
  }
}

/* Inline benchmark chart (cards with a `chart`). */
.v2-co-mini {
  display: grid;
  gap: var(--space-3);
}
.v2-co-mini__title {
  font-size: var(--fs-sm);
  font-weight: 500;
}
.v2-co-mini__title span {
  font-weight: 400;
  color: var(--muted);
}
.v2-co-mini__row {
  display: grid;
  grid-template-columns: minmax(96px, 38%) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
}
.v2-co-mini__row:last-child {
  border-bottom: 0;
}
.v2-co-mini__row dt {
  font-size: var(--fs-caption);
  line-height: 1.3;
  color: var(--muted);
}
.v2-co-mini__row dd {
  display: grid;
  gap: 3px;
}
.v2-co-mini .v2-co-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}
.v2-co-mini .v2-co-bar__track {
  flex: 1 1 0;
}
.v2-co-mini .v2-co-bar > :last-child {
  flex: 0 0 36px;
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Paper grids (the card is the shared paper_card); a paper alone in its
   section lies beside its image, on the same columns as the cards above. */
.v2-co-papers {
  row-gap: clamp(40px, 5vw, 64px);
}
@media (min-width: 720px) {
  .v2-co-papers--single .v2-paper {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: calc(var(--col-gap) * 2);
    align-items: start;
  }
}
/* A paper that would sit alone on the last row of a grid spans the row and
   lies beside its image instead (five papers: two across on tablets). */
@media (min-width: 720px) and (max-width: 1023px) {
  .v2-co-papers.v2-grid--3 > .v2-paper:nth-child(odd):last-child {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: calc(var(--col-gap) * 2);
    align-items: start;
  }
}
@media (min-width: 1024px) {
  .v2-co-papers.v2-grid--3 > .v2-paper:nth-child(3n + 1):last-child {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: calc(var(--col-gap) * 2);
    align-items: start;
  }
}

/* ---------- Touch ---------- */
/* Social links, chips and text links are 40px tap targets on touch screens. */
@media (pointer: coarse) {
  .v2-social a,
  .v2-co-backers .v2-social a {
    width: 40px;
    height: 40px;
  }
  .v2-chip,
  .v2-co-sol .v2-chip,
  .v2-co-toc .v2-chip,
  a.v2-more {
    min-height: 40px;
  }
}

/* ---------- Motion (js/motion.js, base.css "Motion") ---------- */
/* Culture: as a principle's row arrives, its photo opens out of a slightly
   inset frame and settles from a gentle zoom; the icon pops and the copy
   follows, line by line. On hover the photo leans in a touch. */
.v2-motion .v2-co-principles > .v2-rv:not(.is-in) {
  opacity: 1;
}
.v2-motion .v2-co-principles > .v2-rv:not(.is-in) .v2-feature__media,
.v2-motion .v2-co-principles > .v2-rv:not(.is-in) .v2-feature__copy > * {
  opacity: 0;
}
.v2-motion .v2-co-principles > .v2-rv.is-in {
  animation: none;
}
.v2-motion .v2-co-principles > .v2-rv.is-in .v2-feature__media .v2-frame {
  animation: v2-co-unveil 1200ms var(--ease-out) var(--v2-d, 0ms) backwards;
}
.v2-motion .v2-co-principles > .v2-rv.is-in .v2-feature__media img {
  animation: v2-co-settle 1800ms var(--ease-out) var(--v2-d, 0ms) backwards;
}
.v2-motion .v2-co-principles > .v2-rv.is-in .v2-feature__copy > * {
  animation: v2-rise 800ms var(--ease-out)
    calc(var(--v2-d, 0ms) + 240ms + var(--j, 0) * 90ms) backwards;
}
.v2-co-principles .v2-feature__copy > :nth-child(2) {
  --j: 1;
}
.v2-co-principles .v2-feature__copy > :nth-child(3) {
  --j: 2;
}
.v2-motion .v2-co-principles > .v2-rv.is-in .v2-co-mark {
  animation: v2-pop 700ms cubic-bezier(0.34, 1.56, 0.64, 1)
    calc(var(--v2-d, 0ms) + 240ms) backwards;
}
.v2-co-principles .v2-feature__media img {
  transition: scale 900ms var(--ease-out);
}
.v2-co-principles .v2-feature:hover .v2-feature__media img {
  scale: 1.03;
}
@keyframes v2-co-unveil {
  from {
    opacity: 0;
    clip-path: inset(8% 8% 8% 8% round var(--r));
  }
}
@keyframes v2-co-settle {
  from {
    scale: 1.12;
  }
}

/* Research: a chart's bars grow row by row (--i) when it is reached, the
   base model's a beat behind the model's. */
.v2-co-bar__track > span {
  transform-origin: left center;
}
.v2-motion [data-v2-play]:not(.is-in) .v2-co-bar__track > span {
  transform: scaleX(0);
}
.v2-motion [data-v2-play].is-in .v2-co-bar__track > span {
  animation: v2-grow 900ms var(--ease-out) calc(120ms + var(--i, 0) * 70ms)
    backwards;
}
.v2-motion [data-v2-play].is-in .v2-co-bar--base .v2-co-bar__track > span {
  animation-delay: calc(200ms + var(--i, 0) * 70ms);
}
/* Research papers: the figure leans in on hover. */
.v2-co-papers .v2-paper__media img {
  transition: scale 700ms var(--ease-out);
}
.v2-co-papers .v2-paper:hover .v2-paper__media img {
  scale: 1.04;
}