/* 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;
}
/* About: the line under the title is the company's one-sentence position, so it reads as a
   sub-headline (between h3 and h2, ink, a wider column than the hero's lead) rather than the
   muted lead. Scoped under .v2-hero__side to outrank base.css's lead width. */
.v2-hero__side .v2-co-about-lead {
  max-width: 820px;
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  line-height: 1.32;
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* 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;
  }
}
/* The research hero in the old site's chrome (research_new.html v2.old_chrome): that site's layout, the text on
   the left and its looping illustration framed on the right (1080x1296, so 5:6), stacked below desktop. */
.v2-rs-art {
  text-align: start;
}
.v2-rs-art__grid {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}
.v2-rs-art__text {
  display: grid;
  gap: var(--space-6);
  justify-items: start;
}
.v2-rs-art__text .v2-lead {
  max-width: 560px;
}
.v2-rs-art .v2-actions {
  justify-content: start;
}
/* Small phones: "Open Models on Hugging Face" is wider than the screen at the large size, so it would push the page
   sideways. Same treatment as the closing panel's buttons (base.css), plus wrapping for the narrowest phones. */
@media (max-width: 479px) {
  .v2-rs-art .v2-btn--lg {
    padding-inline: var(--space-5);
    font-size: var(--fs-body);
    white-space: normal;
  }
}
.v2-rs-art__media {
  aspect-ratio: 5 / 6;
  width: 100%;
  max-width: 400px;
  justify-self: center;
  border-radius: var(--r-lg);
}
/* /open-source's illustration (opensource.html): a square disc with its own glow, so no frame. */
.v2-rs-art__media--square {
  aspect-ratio: 1;
  max-width: 360px;
  border-radius: 0;
}
.v2-rs-art__media--square img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 1024px) {
  .v2-rs-art__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    column-gap: clamp(32px, 5vw, 64px);
  }
  .v2-rs-art__media {
    justify-self: end;
  }
}

/* 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);
    gap: var(--space-3) var(--col-gap);
    align-items: start;
  }
  /* The title spans every row of the text column (one paragraph, or research's two, and the link). */
  .v2-co-product > .v2-h3 {
    grid-row: 1 / span 3;
  }
  .v2-co-product > .v2-card__text {
    grid-column: 2;
    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;
}