/* Reuse the explicit-line-break treatment from the existing bento labels.
   The welcome sentence stays in its native text node for hydration. */
#capabilities > p:last-child {
  white-space: pre-line;
}
/* Preserve the original three equal headline rows. Reuse the native 36px
   and 60px headline sizes; 4.2cqw fits the longest approved sentence within
   its section (measured at 1687px wide in the original 72px typography).
   Weight, tracking, leading, and row gaps remain inherited from the donor. */
#capabilities + section {
  container-type: inline-size;
}
#capabilities + section > h2 {
  font-size: clamp(36px, 4.2cqw, 60px);
}
/* Copied from the existing #agents scroll offset in sentra-content.css (n=1).
   The homepage overview CTA lands below the fixed header. */
#capabilities {
  scroll-margin-top: 110px;
}
/* Inside Sentra media box without its parked clips (sentra-home.js). The
   box keeps its own bg-primary-100 (#f5f5f5), the same surface as the active
   story card, so it needs no new colour. The dark scrim only served the
   video; without it the native white-on-primary-200/40 bar has no contrast,
   so the track takes primary-200 at full strength and the fill takes
   primary-1000, the story headings' text-primary-1000. */
#capabilities [data-sentra-media-archived] > video,
#capabilities [data-sentra-media-archived] > div:first-child {
  display: none;
}
#capabilities [data-sentra-media-archived] > .h-1 {
  background-color: var(--color-primary-200);
}
#capabilities [data-sentra-media-archived] > .h-1 > div {
  background-color: var(--color-primary-1000);
}
/* Type and colour come from classes copied from the active story's
   description (font-book, text-sm, leading-[1.4em], text-primary-600). */
#capabilities [data-sentra-render-missing] {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  pointer-events: none;
}
/* Copied from the bento asset-manager card's 16px inset, the privacy card's
   centered caption, and the clock caption's 1.25 line-height (n=1 each).
   Longer captions wrap inside the existing card geometry on small screens. */
[data-sentra-bento="k1"] > span:last-child,
[data-sentra-bento="train"] > span:last-child,
[data-sentra-bento="upscaling"] > span:last-child,
[data-sentra-bento="fourk"] > span:last-child,
[data-sentra-bento="donottrain"] > div:last-child {
  max-width: calc(100% - 2rem);
  text-align: center;
  line-height: 1.25;
}
/* Reuse the 14–24px card-label range. Size this two-line label against its
   own narrow card, keeping the longest word inside the original 16px inset. */
[data-sentra-bento="styles"] {
  container-type: inline-size;
}
[data-sentra-bento="styles"] > div {
  font-size: clamp(14px, 18cqw, 24px);
  white-space: pre-line;
}
/* Copy the same 16px card inset for the two longer headings (n=1). */
[data-sentra-bento="speed"] > span,
[data-sentra-bento="train"] > span:first-child {
  max-width: calc(100% - 2rem);
  text-align: center;
}
/* Copy the site's 12px small-label size and the original caption's 221px
   desktop measure (253px card less two 16px insets, n=1). The full sentence
   needs 197px to fit two lines at 12px with the loaded Suisse font. */
[data-sentra-bento="donottrain"] > div:last-child {
  font-size: 12px;
  max-width: min(calc(100% - 1rem), 221px);
  text-wrap: balance;
}
/* Reuse the existing 16px card inset and 24px secondary-card heading. */
[data-sentra-bento="minimalist"] > div {
  max-width: calc(100% - 2rem);
  font-size: 24px;
  white-space: pre-line;
}
[data-sentra-bento="minimalist"] [aria-hidden="true"] {
  width: 100%;
  font-size: inherit;
  line-height: inherit;
}
[data-sentra-bento="editor"] > span {
  max-width: calc(100% - 2rem);
  font-size: 30px;
  line-height: 1.25;
}
[data-sentra-bento="realtime"] > div {
  font-size: 22px;
}
[data-sentra-bento="fourk"] {
  container-type: inline-size;
  gap: 8px;
}
[data-sentra-bento="fourk"] > span:first-of-type {
  max-width: calc(100% - 1rem);
  font-size: clamp(20px, 10cqw, 36px);
  line-height: 1.1;
  text-align: center;
}
[data-sentra-bento="fourk"] > span:last-child {
  text-wrap: balance;
}
/* The original cube rose into the label. Reuse the neighbouring card's
   16px top inset and the group's 8px gap to give both their own space. */
[data-sentra-bento="workflows"] {
  justify-content: flex-start;
  padding-top: 16px;
}
[data-sentra-bento="workflows"] > div:first-child {
  position: relative;
  z-index: 10;
}
[data-sentra-bento="workflows"] > div:nth-child(2) {
  margin-top: 16px;
  margin-bottom: 0;
  /* Measured rotating-face extents need 15% less space to clear both the
     heading and the bottom edge of the native 132px desktop card. */
  transform: scale(0.85);
  transform-origin: top center;
}
@media (max-width: 1024px) {
  /* Copy the 8px group gap and 20px/28px neighbouring card label.
     The native 97px mobile card requires 60% cube scale for its full orbit. */
  [data-sentra-bento="workflows"] {
    padding-top: 8px;
  }
  [data-sentra-bento="workflows"] > div:first-child {
    font-size: 20px;
    line-height: 28px;
  }
  [data-sentra-bento="workflows"] > div:nth-child(2) {
    margin-top: 12px;
    transform: scale(0.6);
  }
}
@media (min-width: 1025px) and (max-width: 1359px) {
  /* Keep the native 16-column grid. Trade one of the center card's nine
     columns for a fourth caption column; the outer cards keep their areas. */
  .bento[data-bento-grid] {
    grid-template-areas:
      "speed speed speed speed speed speed speed upscaling upscaling upscaling train train train train train train"
      "speed speed speed speed speed speed speed upscaling upscaling upscaling train train train train train train"
      "speed speed speed speed speed speed speed upscaling upscaling upscaling train train train train train train"
      "speed speed speed speed speed speed speed upscaling upscaling upscaling train train train train train train"
      "fourk fourk fourk fourk k1 k1 k1 k1 k1 k1 k1 k1 donottrain donottrain donottrain donottrain"
      "fourk fourk fourk fourk k1 k1 k1 k1 k1 k1 k1 k1 donottrain donottrain donottrain donottrain"
      "fourk fourk fourk fourk k1 k1 k1 k1 k1 k1 k1 k1 models models models models"
      "minimalist minimalist minimalist minimalist k1 k1 k1 k1 k1 k1 k1 k1 models models models models"
      "minimalist minimalist minimalist minimalist k1 k1 k1 k1 k1 k1 k1 k1 models models models models"
      "minimalist minimalist minimalist minimalist k1 k1 k1 k1 k1 k1 k1 k1 models models models models"
      "assetmanager assetmanager assetmanager bleedingedge bleedingedge bleedingedge styles styles editor editor editor lipsync lipsync threed threed threed"
      "assetmanager assetmanager assetmanager bleedingedge bleedingedge bleedingedge styles styles editor editor editor lipsync lipsync threed threed threed"
      "assetmanager assetmanager assetmanager bleedingedge bleedingedge bleedingedge styles styles editor editor editor lipsync lipsync threed threed threed"
      "assetmanager assetmanager assetmanager bleedingedge bleedingedge bleedingedge styles styles editor editor editor lipsync lipsync threed threed threed";
  }
  [data-sentra-bento="editor"] > span {
    font-size: 24px;
  }
}
@media (max-width: 767px) {
  /* Copy the native fine-tuning card's 24px heading and 14px caption (n=1).
     These expanded descriptions must fit the existing 174px mobile tiles. */
  [data-sentra-bento="speed"] > span {
    font-size: 24px;
  }
  [data-sentra-bento="fourk"] > span:last-child,
  [data-sentra-bento="upscaling"] > span:last-child {
    font-size: 14px;
  }
}
@media (max-width: 359px) {
  /* Copy the site's 12px small label and 8px (gap-2) spacing values
     so captions stay readable inside the narrow mobile tiles. */
  [data-sentra-bento="fourk"] > span:last-child,
  [data-sentra-bento="upscaling"] > span:last-child {
    font-size: 12px;
    max-width: calc(100% - 1rem);
  }
}

/* Restore the original descriptor/suffix split. Reserve the longest descriptor
   so the heading never jumps; let the noun follow it horizontally only. */
[data-sentra-showcase-rotator] {
  display: inline-flex;
  align-items: flex-end;
  max-width: 100%;
  white-space: normal;
}
[data-sentra-showcase-rotator] > span:first-child {
  display: block;
  width: var(--sentra-showcase-descriptor-width);
  flex: 0 0 var(--sentra-showcase-descriptor-width);
  /* ~= Keep the native line-box mask, ending at the moving noun boundary.
     A face rolls vertically through it without painting over "models". */
  clip-path: inset(
    0 max(0px, calc(100% - var(--sentra-showcase-inline-edge, 100%))) 0 0
  );
  /* ~= Owned timeline replaces the native interval, preserving its 60deg faces. */
  --cylinder-rotation: var(--sentra-showcase-angle, 0deg) !important;
}
[data-sentra-showcase-rotator] > span:first-child > span:first-child,
[data-sentra-showcase] [data-longest-word-spacer] + span,
[data-sentra-showcase] [data-longest-word-spacer] {
  display: block;
  width: 100%;
}
[data-sentra-showcase-rotator] > span:first-child > span:first-child {
  /* ~= The native perspective container has zero width: its origin is left. */
  perspective-origin: 0px 50% !important;
}
[data-sentra-showcase] [data-cylinder-word] {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  left: 0;
  /* ~= The shared requestAnimationFrame clock applies the original ease-in-out. */
  transition: none !important;
}
[data-sentra-showcase] [style*="--cylinder-face"] {
  --cylinder-face: calc(1.5em * var(--sentra-showcase-lines, 1)) !important;
}
[data-sentra-showcase-suffix] {
  display: inline-block;
  width: var(--sentra-showcase-suffix-width);
  flex: 0 0 var(--sentra-showcase-suffix-width);
  transform: translateX(var(--sentra-showcase-suffix-shift, 0px)) !important;
  /* ~= Noun movement and the 3D turn must not have independent CSS timelines. */
  transition: none !important;
}
@media (max-width: 639px) {
  [data-sentra-showcase] {
    container-type: inline-size;
  }
  [data-sentra-showcase] h2 {
    /* ~= Native 36px cap; measured "large language models." is 10.521em.
       Reserve 10.6em inside the section's actual content box. Viewport units
       ignored scrollbar space and let the hidden spacer wrap to two lines. */
    font-size: min(2.25rem, calc(100cqw / 10.6));
  }
}
/* The hydrated feature row stays as an anchor. Its replacement copies the
   native typography, 96px spacing, edge fades and 28px logo slots (n=1). */
[data-sentra-showcase] [data-marquee] {
  display: none;
}
[data-sentra-provider] {
  white-space: nowrap; /* ~= Native brand labels are unbroken marquee items. */
}
[data-sentra-provider] > svg {
  flex: 0 0 28px; /* ~= Native .size-7; preserve each SVG's aspect ratio. */
  fill: currentColor; /* <- Native brand glyphs inherit the row's gray ink. */
}
[data-customers-section] [data-marquee] {
  display: none !important;
}
[data-customers-section] [data-heading-title] {
  text-wrap: balance;
}
[data-customers-section] > .mt-12:last-child {
  flex-wrap: wrap;
}
[data-customers-section] [data-button] a {
  white-space: nowrap;
}
[data-sentra-industry] {
  white-space: nowrap;
}
[data-sentra-industry] > svg {
  flex: 0 0 28px;
}
[data-sentra-industry-marquee]:hover > div,
[data-sentra-industry-marquee]:focus-within > div,
[data-sentra-industry-marquee][data-paused="true"] > div,
[data-sentra-industry-marquee][data-document-hidden="true"] > div {
  animation-play-state: paused;
}
[data-sentra-industry-marquee]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}
[data-sentra-model-marquee]:hover > div,
[data-sentra-model-marquee][data-paused="true"] > div,
[data-sentra-model-marquee][data-document-hidden="true"] > div {
  animation-play-state: paused; /* ~= Reuse the page's paused motion state. */
}
@media (prefers-reduced-motion: reduce) {
  [data-sentra-model-marquee],
  [data-sentra-industry-marquee] {
    overflow-x: auto; /* <- Existing horizontal rail accessibility pattern. */
  }
  [data-sentra-model-marquee] > div,
  [data-sentra-industry-marquee] > div {
    animation: none !important; /* ~= Static readable version of the native loop. */
  }
  [data-sentra-model-marquee] > [aria-hidden="true"],
  [data-sentra-industry-marquee] > [aria-hidden="true"] {
    display: none; /* ~= The static rail needs only the accessible copy. */
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-sentra-showcase] [style*="--cylinder-rotation"] {
    /* Hold the native first face (0deg); its JS timer must not flip the text. */
    --cylinder-rotation: 0deg !important;
  }
}
.sentra-interface-section h2 + p {
  /* Preserve the requested sentence break through native hydration. */
  white-space: pre-line;
}
.sentra-creation-showcase [data-heading-title] {
  text-wrap: balance;
}
.sentra-possibilities [data-heading-title] {
  text-wrap: balance;
}
.sentra-possibilities-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 1.5rem;
  margin: 4rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.sentra-possibilities-actions a {
  white-space: nowrap;
}
@media (min-width: 768px) {
  .sentra-possibilities-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 6rem;
  }
}
@media (min-width: 1280px) {
  .sentra-possibilities-list {
    grid-template-columns: repeat(6, auto);
    justify-content: space-between;
  }
}
@media (min-width: 1024px) {
  .sentra-creation-showcase > div:first-child > * {
    /* Share the existing row so the longer paragraph cannot squeeze the title. */
    flex: 1 1 0;
    min-width: 0;
  }
}
/* Reuse the native hidden-state rule; retire the failed foreground overlay. */
[data-bento-grid] img[hidden],
[data-bento-grid] img[src*="/_archive/placeholder.png"],
[data-sentra-workflow-preview] > img:last-child {
  display: none !important;
}
/* Carousel labels: the Sentra mark and the product name, painted in the native
   logo slot. The native logo subtree stays in place, hidden, for hydration.
   Sizes copy the slot (n=1): 10px gap, card one's 16/24 then 20/28 weight 500,
   and the header mark's mask. Tone follows each card's native logo ink. */
.embla__container > [data-example-card] [data-sentra-carousel-feature] {
  color: #fff;
}
.embla__container > [data-example-card] [data-sentra-carousel-tone="dark"] {
  color: #000;
}
.embla__container > [data-example-card] [data-sentra-carousel-feature] > * {
  display: none !important;
}
.embla__container > [data-example-card] [data-sentra-carousel-feature]::before {
  content: "";
  flex: none;
  width: 18px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: url("/_site/brand/mark-white.svg") center / contain no-repeat;
  mask: url("/_site/brand/mark-white.svg") center / contain no-repeat;
}
.embla__container > [data-example-card] [data-sentra-carousel-feature]::after {
  content: attr(data-sentra-carousel-feature);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
/* Prompts balance within the card; 1.2 desktop leading, native font sizes. */
.embla__container > [data-example-card] [id="fig-caption"] {
  text-wrap: balance;
}
@media (min-width: 768px) {
  .embla__container
    > [data-example-card]
    [data-sentra-carousel-feature]::before {
    width: 22px;
    height: 20px;
  }
  .embla__container
    > [data-example-card]
    [data-sentra-carousel-feature]::after {
    font-size: 20px;
    line-height: 28px;
  }
  .embla__container > [data-example-card] [id="fig-caption"] {
    line-height: 1.2;
  }
}
/* The Sheets card reuses the Agents card's artwork: the poster the Agents
   card's native video displays (n=1), at the same cover crop. The Sheets
   card's own native media is hidden, and sentra-home.js parks its source. */
.embla__container > [data-example-card] [data-sentra-carousel-art="agents"] {
  background: #000 url("/_archive/s.krea.ai/seedance25hero-poster.jpg") center /
    cover no-repeat;
}
.embla__container
  > [data-example-card]
  [data-sentra-carousel-art]
  > :not(.z-20) {
  display: none !important;
}
/* The native workspace screenshot is zoomed 220% by its `scale-220` class to
   crop a detail; the owned photograph replacing it is shown whole. */
[data-bento-grid] img[data-sentra-artwork="fern-glass"] {
  scale: none !important;
}
/* The interface section's left thumbnail rail (native "+" and history
   swatches) is removed; the prompt box stays as the section's one control. */
.sentra-interface-section > div > div:has(.lucide-plus) {
  display: none !important;
}
/* The Workflows card (EV sketches prompt) shows the owned EV illustration;
   the colour behind it is the illustration's own flat backdrop. */
.embla__container > [data-example-card] [data-sentra-carousel-art="ev"] {
  background: #79727e url("/_site/media/ev-hatchback.webp") center / cover
    no-repeat;
}
/* The header stays in its dark state on the homepage (sentra-home.js keeps
   `header-inverted`). Copy the solid bar every other page paints under the
   80% black layer (n=1, /pricing header: rgb(10, 10, 10)) so it reads black
   over white sections too. */
header.header.header-inverted {
  background-color: rgb(10, 10, 10);
}
/* Prompt box chips: the third chip is web search, marked with Lucide's
   "globe" (drawn as a mask so it takes the chip's text colour), and the model
   chip sits at the row's far end, beside Start. */
.sentra-interface-section
  .flex-wrap:has(> button)
  > button:nth-of-type(3)::before {
  content: "";
  flex: none;
  align-self: center;
  width: 14px;
  height: 14px;
  margin-right: 4px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'%2F%3E%3Cpath%20d%3D'M12%202a14.5%2014.5%200%200%200%200%2020%2014.5%2014.5%200%200%200%200-20'%2F%3E%3Cpath%20d%3D'M2%2012h20'%2F%3E%3C%2Fsvg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2024%2024'%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%20stroke-linecap%3D'round'%20stroke-linejoin%3D'round'%3E%3Ccircle%20cx%3D'12'%20cy%3D'12'%20r%3D'10'%2F%3E%3Cpath%20d%3D'M12%202a14.5%2014.5%200%200%200%200%2020%2014.5%2014.5%200%200%200%200-20'%2F%3E%3Cpath%20d%3D'M2%2012h20'%2F%3E%3C%2Fsvg%3E")
    center / contain no-repeat;
}
.sentra-interface-section .flex-wrap:has(> button) > button:last-of-type {
  margin-left: auto;
}
/* Deep Research: a feathered halo in the photograph's own sky colour
   (rgb 216 212 206, sampled from its top 45%) sits behind the text block
   only, so the copy reads over the grass and the rest of the image is left
   as it is. */
[data-sentra-art-treatment="paper-copy"]:has(
    img[data-sentra-artwork="pastel-hills"]
  )::after {
  background: radial-gradient(
    ellipse 56% 50% at 50% 52%,
    rgba(216, 212, 206, 0.88) 0%,
    rgba(216, 212, 206, 0.74) 55%,
    rgba(216, 212, 206, 0) 100%
  );
}
[data-sentra-art-treatment="paper-copy"]:has(
    img[data-sentra-artwork="pastel-hills"]
  )
  :is(span, p) {
  text-shadow: 0 0 14px rgba(216, 212, 206, 0.9);
}