/*
 * Cosmiron 2.0 — styles for the added sections only.
 * Every rule is scoped under .c2, so nothing on the existing pages is restyled.
 * Sizes follow the site's own vw scale (desktop = 1440 design width) and its
 * 767 px / 479 px breakpoints, so new sections sit flush with existing ones.
 */

.c2 {
  --c2-night: #13101c;
  --c2-plum: #171024;
  --c2-aubergine: #1f1330;
  --c2-pill: #291f39;
  --c2-paper: #f9f9f9;
  --c2-ink: #1a0b54;
  --c2-lavender: #a997ce;
  --c2-dusk: #83799e;
  --c2-hairline: rgba(201, 182, 255, 0.14);
  --c2-spectrum: linear-gradient(90deg, #2ba7ff, #ca45ff 50%, #fe881b);
  --c2-button: linear-gradient(90deg, #1c4eff, #ac24ff 50%, #fe881b);
  --c2-tint: #ac24ff;
  --c2-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.c2 p,
.c2 figure,
.c2 blockquote,
.c2 dl,
.c2 dd {
  margin: 0;
}
.c2 dt {
  font-weight: 400;
}
.c2 a:focus-visible,
.c2 button:focus-visible {
  outline: 2px solid #ca45ff;
  outline-offset: 3px;
}
.c2 .caption-icon svg {
  display: block;
  width: 100%;
  height: auto;
}

.c2 .c2-container {
  position: relative;
  width: 83vw;
  margin-left: auto;
  margin-right: auto;
}

/* Each headline line as its own shrink-wrapped block: lets text-wrap balance work
   (a <br> blocks it) while the gradient still spans only the words. */
.c2 .c2-line2 {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}
/* Gradient text that wraps repeats the full spectrum on every line. */
.c2 .c2-clone {
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Dark sections stack above the footer, exactly like the site's .section (z-index 7);
   the closing paper section keeps the site's own z-index 6. */
.c2 > section {
  position: relative;
  z-index: 7;
}

.c2 .c2-spectrum {
  background-image: var(--c2-spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- headings (mirror the site's h3) ---------- */
.c2 .c2-h1,
.c2 .c2-h3 {
  margin: 0;
  color: var(--c2-ink);
  font-size: 3.194vw;
  font-weight: 500;
  letter-spacing: -0.113vw;
  line-height: 110%;
  text-wrap: balance;
}
.c2 .c2-h1,
.c2 .c2-h3.white {
  color: #fff;
}

/* ---------- hero ---------- */
.c2 .c2-hero {
  position: relative;
  z-index: 8;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 13vw 0 6vw;
  background-color: var(--c2-night);
}
.c2 .c2-hero-bloom {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(55% 40% at 50% 86%, rgba(172, 36, 255, 0.5), transparent 72%),
    radial-gradient(36% 28% at 50% 84%, color-mix(in srgb, var(--c2-tint) 38%, transparent), transparent 70%),
    radial-gradient(34% 34% at 6% 62%, rgba(27, 77, 254, 0.42), transparent 70%),
    radial-gradient(34% 34% at 94% 62%, rgba(254, 136, 27, 0.3), transparent 70%);
  -webkit-mask-image: linear-gradient(#000 55%, transparent 100%);
  mask-image: linear-gradient(#000 55%, transparent 100%);
}
.c2 .c2-hero-bloom::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.14;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.c2 .c2-hero-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.08vw;
  max-width: 64vw;
  text-align: center;
}
.c2 .c2-lede {
  max-width: 42vw;
}
.c2 .c2-hero--work {
  padding-bottom: 5vw;
}
.c2 .c2-hero-stage {
  position: relative;
  z-index: 3;
  width: 72vw;
  margin-top: 5.5vw;
  margin-bottom: -9vw;
}
.c2 .c2-back {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 0.56vw;
  margin-bottom: 0.7vw;
  color: var(--c2-lavender);
  font-size: 0.97vw;
  text-decoration: none;
  transition: color 0.4s var(--c2-ease);
}
.c2 .c2-back:hover {
  color: #fff;
}

.c2 .c2-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.1vw 2.78vw;
  margin-top: 0.7vw;
  padding: 1.25vw 2.08vw;
  border: 1px solid var(--c2-hairline);
  border-radius: 1.39vw;
  background-color: rgba(41, 31, 57, 0.55);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.c2 .c2-facts > div {
  display: grid;
  gap: 0.35vw;
  text-align: left;
}
.c2 .c2-facts dt {
  color: var(--c2-dusk);
  font-size: 0.76vw;
  letter-spacing: 0.08em;
  line-height: 120%;
  text-transform: uppercase;
}
.c2 .c2-facts dd {
  display: flex;
  align-items: center;
  gap: 0.56vw;
  color: #fff;
  font-size: 1.04vw;
  line-height: 130%;
}
.c2 .c2-facts a {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 0.2em;
}

.c2 .c2-logo-chip {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.94vw;
  height: 1.94vw;
  overflow: hidden;
  border-radius: 0.56vw;
  background-color: #fff;
}
.c2 .c2-logo-chip img {
  width: 88%;
  height: 88%;
  object-fit: contain;
}

.c2 .c2-status {
  display: inline-flex;
  align-items: center;
  gap: 0.42vw;
  color: #5fd3a8;
  font-size: 0.97vw;
  font-weight: 500;
}
.c2 .c2-status::before {
  content: "";
  width: 0.49vw;
  height: 0.49vw;
  border-radius: 50%;
  background-color: currentColor;
  box-shadow: 0 0 0 0.28vw rgba(95, 211, 168, 0.18);
}

/* ---------- product frames ---------- */
.c2 .c2-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(201, 182, 255, 0.16);
  border-radius: 1.25vw;
  background-color: #0e0b16;
  box-shadow: 0 3vw 6vw -2.5vw rgba(6, 3, 16, 0.85);
}
.c2 .c2-frame-bar {
  display: flex;
  align-items: center;
  gap: 0.42vw;
  height: 2.08vw;
  padding: 0 1.04vw;
  border-bottom: 1px solid rgba(201, 182, 255, 0.1);
  background-color: #1b1528;
}
.c2 .c2-frame-bar i {
  width: 0.62vw;
  height: 0.62vw;
  border-radius: 50%;
  background-color: #3a2f52;
}
.c2 .c2-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- bloom bridge: night into paper ---------- */
.c2 .c2-bridge {
  position: relative;
  z-index: 7;
  height: 17vw;
  background:
    radial-gradient(85% 150% at 50% 135%, #ffffff 44%, #efe6ff 53%, #c9a5ff 62%, rgba(124, 58, 237, 0.5) 72%, rgba(19, 16, 28, 0) 86%),
    var(--c2-night);
}

/* ---------- section heads ---------- */
.c2 .c2-section {
  position: relative;
  padding: 8vw 0;
}
.c2 .c2-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.67vw;
  max-width: 62vw;
  margin: 0 auto 4.5vw;
  text-align: center;
}
.c2 .c2-head--flush {
  margin-bottom: 3vw;
}
.c2 .c2-head .body_16 {
  max-width: 46vw;
  text-wrap: balance;
}

/* ---------- challenge: before / with Cosmiron ---------- */
.c2 .c2-challenge {
  padding-top: 6vw;
}

/* ---------- who it serves: client's partners ---------- */
.c2 .c2-partners {
  padding-top: 2vw;
  padding-bottom: 4vw;
}
.c2 .c2-partners .c2-head {
  margin-bottom: 3vw;
}
.c2 .c2-marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 1.39vw 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.c2 .c2-marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: c2-marquee 55s linear infinite;
}
.c2 .c2-marquee:hover .c2-marquee-track {
  animation-play-state: paused;
}
.c2 .c2-marquee-item {
  display: grid;
  flex: none;
  place-items: center;
  height: 3.89vw;
  margin-right: 4.86vw;
}
.c2 .c2-marquee-item img {
  display: block;
  width: auto;
  max-width: 10.4vw;
  height: 3.33vw;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 0.6s var(--c2-ease), opacity 0.6s var(--c2-ease);
}
.c2 .c2-marquee-item img:hover {
  filter: none;
  opacity: 1;
}
@keyframes c2-marquee {
  to {
    transform: translateX(-50%);
  }
}
.c2 .c2-industries {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 2.08vw;
  margin: 3.47vw 0 0;
  border-top: 1px solid #ece8f5;
}
.c2 .c2-industries > div {
  display: grid;
  align-content: start;
  gap: 0.42vw;
  padding: 1.25vw 0;
  border-bottom: 1px solid #ece8f5;
}
.c2 .c2-industries dt {
  color: var(--c2-ink);
  font-size: 0.97vw;
  font-weight: 500;
  line-height: 130%;
}
.c2 .c2-industries dd {
  color: var(--c2-dusk);
  font-size: 0.9vw;
  line-height: 140%;
}
.c2 .c2-source {
  margin-top: 1.39vw;
  color: var(--c2-dusk);
  font-size: 0.76vw;
  text-align: center;
}
.c2 .c2-compare {
  display: grid;
  grid-template-columns: 1fr 15vw 1fr;
  align-items: start;
  gap: 2.08vw;
}
.c2 .c2-compare-col {
  display: grid;
  gap: 0.69vw;
}
.c2 .c2-compare-label {
  margin-bottom: 0.35vw;
  color: var(--c2-dusk);
  font-size: 0.83vw;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.c2 .c2-cards {
  display: grid;
  gap: 0.69vw;
}
.c2 .c2-cards .div-block-594 {
  box-shadow: 0 0.7vw 2.2vw -1.2vw rgba(26, 11, 84, 0.22);
}
.c2 .c2-mark {
  position: relative;
  display: grid;
  align-self: center;
  justify-self: center;
  place-items: center;
  width: 12.5vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 7vw 1vw color-mix(in srgb, var(--c2-tint) 26%, transparent), 0 0 4vw 0 rgba(172, 36, 255, 0.2);
}
.c2 .c2-mark::before {
  content: "";
  position: absolute;
  inset: -0.42vw;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #1b4dfe, #ac24ff 30%, #f79fff 50%, #ffd600 68%, #fe881b 82%, #1b4dfe);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.35vw), #000 calc(100% - 0.3vw));
  mask: radial-gradient(farthest-side, transparent calc(100% - 0.35vw), #000 calc(100% - 0.3vw));
  animation: c2-spin 60s linear infinite;
}
.c2 .c2-mark img {
  width: 72%;
  height: auto;
}
@keyframes c2-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- why + what Cosmiron owned ---------- */
.c2 .c2-owned {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 11vw 0 10vw;
  background-color: var(--c2-night);
  background-image:
    linear-gradient(#13101c 0%, rgba(19, 16, 28, 0) 30%, rgba(19, 16, 28, 0) 62%, #13101c 100%),
    url("../cdn.prod.website-files.com/6720dd1ab6df0da205830ab1/6870eba64e33155705ab067d_gradient%20background%20image.avif");
  background-position: 0 0, 50% 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%, cover;
}
.c2 .c2-owned .c2-container {
  width: 83vw;
}
.c2 .c2-statement {
  max-width: 64vw;
  color: #fff;
  font-size: 2.36vw;
  font-weight: 500;
  letter-spacing: -0.06vw;
  line-height: 132%;
  text-wrap: balance;
}
.c2 .c2-capabilities {
  margin-bottom: 0;
}
/* Capability cards on case studies carry more detail than the homepage cards,
   so they grow with their content instead of the fixed 25.21vw height. */
.c2 .c2-capabilities .case-card {
  height: auto;
  min-height: 25.21vw;
  padding-bottom: 2.08vw;
}
.c2 .c2-capabilities .card-initial {
  gap: 2.5vw;
  width: 100%;
}
.c2 .c2-capabilities .div-block-593 {
  width: 100%;
}
.c2 .c2-capabilities .div-block-495 {
  row-gap: 1.11vw;
  margin-bottom: 0;
}
.c2 .c2-card-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.83vw;
  width: 100%;
}
.c2 .c2-card-top .caption {
  flex: none;
  white-space: nowrap;
}
.c2 .c2-card-phase {
  color: var(--c2-dusk);
  font-size: 0.76vw;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.c2 .c2-card-summary {
  color: #bdaee7;
  font-size: 0.97vw;
  line-height: 150%;
}
.c2 .c2-card-module {
  display: grid;
  gap: 0.56vw;
  width: 100%;
  padding: 0.83vw;
  border: 1px solid rgba(207, 177, 255, 0.1);
  border-radius: 1.11vw;
  background-color: rgba(207, 177, 255, 0.05);
}
.c2 .c2-card-label {
  color: var(--c2-dusk);
  font-size: 0.69vw;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 120%;
  text-transform: uppercase;
}
.c2 .c2-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35vw;
}
.c2 .c2-card-tags span {
  padding: 0.42vw 0.63vw;
  border-radius: 100vw;
  background-color: rgba(207, 177, 255, 0.12);
  color: #fff;
  font-size: 0.76vw;
  line-height: 1;
}
.c2 .c2-card-output {
  display: grid;
  gap: 0.35vw;
  width: 100%;
  margin-top: 1.39vw;
  padding-top: 1.11vw;
  border-top: 1px solid var(--c2-hairline);
}
.c2 .c2-card-output-value {
  color: #fff;
  font-size: 0.97vw;
  font-weight: 500;
  line-height: 135%;
}
.c2 .c2-deliver {
  margin-bottom: 8vw;
}
.c2 .c2-deliver-head {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 1.67vw;
}
.c2 .c2-deliver-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4.17vw;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--c2-hairline);
  list-style: none;
}
.c2 .c2-deliver-list li {
  display: flex;
  align-items: flex-start;
  gap: 1.04vw;
  padding: 1.46vw 0;
  border-bottom: 1px solid var(--c2-hairline);
  color: #fff;
  font-size: 1.25vw;
  line-height: 140%;
}
.c2 .c2-deliver-list .bullet-icon {
  margin-top: 0.2vw;
}

/* ---------- inside the platform ---------- */
.c2 .c2-inside {
  position: relative;
  padding: 6vw 0 10vw;
  background-color: var(--c2-night);
}
.c2 .c2-inside-grid {
  display: grid;
  grid-template-columns: 27vw 1fr;
  align-items: start;
  gap: 6vw;
}
.c2 .c2-inside-copy {
  position: sticky;
  top: 9vw;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.67vw;
}
.c2 .c2-features {
  margin-top: 0.7vw;
}
.c2 .c2-screens {
  display: grid;
  gap: 6.25vw;
}
.c2 .c2-screen {
  position: relative;
  display: grid;
  gap: 1.39vw;
}
.c2 .c2-screen::before {
  content: "";
  position: absolute;
  inset: 12% -5% 10%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 55%, color-mix(in srgb, var(--c2-tint) 32%, transparent), rgba(172, 36, 255, 0.16) 55%, transparent 72%);
  filter: blur(2.5vw);
  pointer-events: none;
}
.c2 .c2-screen .c2-frame,
.c2 .c2-screen-copy {
  position: relative;
  z-index: 1;
}
.c2 .c2-screen-copy {
  display: grid;
  justify-items: start;
  gap: 0.49vw;
  max-width: 38vw;
  text-align: left;
}
.c2 .c2-screen-copy .title_24 {
  justify-content: flex-start;
  align-items: flex-start;
}

/* ---------- stack ---------- */
.c2 .c2-stack {
  position: relative;
  padding: 2vw 0 9vw;
  background-color: var(--c2-night);
}
.c2 .c2-tags {
  justify-content: center;
  max-width: 66vw;
  margin: 0 auto;
}
.c2 .c2-ai-note {
  margin-top: 2.08vw;
  text-align: center;
}

/* ---------- closing paper section ---------- */
.c2 .c2-close > .c2-container {
  padding-top: 10vw;
}
.c2 .c2-close h2 {
  text-wrap: balance;
}
.c2 .c2-close .div-block-410 {
  padding-top: 8vw;
}
.c2 .c2-outcome {
  max-width: 68vw;
  margin: 0 auto;
  color: var(--c2-ink);
  font-size: 3.194vw;
  font-weight: 500;
  letter-spacing: -0.113vw;
  line-height: 115%;
  text-align: center;
  text-wrap: balance;
}
.c2 .c2-line {
  background-image: linear-gradient(90deg, hsl(252, 77%, 19%), hsl(261, 93%, 23%) var(--c2-fill, 0%), hsl(255, 22%, 82%) var(--c2-fill, 0%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.c2 .c2-quote {
  display: grid;
  gap: 1.39vw;
  max-width: 54vw;
  margin: 6vw auto 0;
  text-align: center;
}
.c2 .c2-quote blockquote {
  padding: 0;
  border: 0;
  color: var(--c2-ink);
  font-size: 1.944vw;
  letter-spacing: -0.04vw;
  line-height: 138%;
}
.c2 .c2-quote blockquote::before {
  content: "“";
  display: block;
  margin-bottom: 0.7vw;
  background-image: var(--c2-spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 5.56vw;
  line-height: 0.7;
}
.c2 .c2-quote figcaption {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.7vw;
  color: var(--c2-dusk);
  font-size: 1.04vw;
}
.c2 .c2-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.83vw;
}

.c2 .c2-draft {
  display: inline-flex;
  align-items: center;
  margin-left: 0.7vw;
  padding: 0.28vw 0.56vw;
  border-radius: 100vw;
  background-color: #fff2cf;
  color: #7a4f00;
  font-size: 0.69vw;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
  vertical-align: middle;
  -webkit-text-fill-color: #7a4f00;
}

/* ---------- work index ---------- */
.c2 .c2-work-list {
  position: relative;
  padding: 3vw 0 8vw;
  background-color: var(--c2-night);
}
.c2 .c2-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.56vw;
  margin-bottom: 3vw;
}
.c2 .c2-filters button {
  padding: 0.76vw 1.25vw;
  border: 1px solid transparent;
  border-radius: 100vw;
  background-color: var(--c2-pill);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.97vw;
  font-weight: 500;
  transition: background-color 0.4s var(--c2-ease), color 0.4s var(--c2-ease);
}
.c2 .c2-filters button[aria-pressed="true"] {
  background-color: #fff;
  color: var(--c2-ink);
}
.c2 .c2-exhibits {
  display: grid;
  gap: 2.08vw;
}
.c2 .c2-exhibit[hidden] {
  display: none;
}
.c2 a.c2-exhibit-link {
  position: relative;
  display: grid;
  grid-template-columns: 31vw 1fr;
  align-items: center;
  gap: 3.47vw;
  overflow: hidden;
  padding: 2.36vw;
  border: 1px solid rgba(201, 182, 255, 0.08);
  border-radius: 2.22vw;
  background-color: #0a05148c;
  -webkit-backdrop-filter: blur(36px);
  backdrop-filter: blur(36px);
  color: #fff;
  text-decoration: none;
  transition: border-color 0.8s var(--c2-ease);
}
.c2 a.c2-exhibit-link::before {
  content: "";
  position: absolute;
  inset: -20% -10% -30% 30%;
  z-index: 0;
  background:
    radial-gradient(45% 55% at 60% 70%, color-mix(in srgb, var(--c2-tint) 42%, transparent), transparent 70%),
    radial-gradient(40% 45% at 40% 90%, rgba(172, 36, 255, 0.35), transparent 70%);
  opacity: 0.6;
  transition: opacity 1s var(--c2-ease);
  pointer-events: none;
}
.c2 a.c2-exhibit-link:hover {
  border-color: rgba(201, 182, 255, 0.22);
}
.c2 a.c2-exhibit-link:hover::before {
  opacity: 1;
}
.c2 .c2-exhibit-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25vw;
}
.c2 .c2-exhibit-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.04vw;
}
.c2 .c2-exhibit-client {
  display: flex;
  align-items: center;
  gap: 0.7vw;
  color: var(--c2-lavender);
  font-size: 1.11vw;
}
.c2 .c2-exhibit-title {
  margin: 0;
  color: #fff;
  font-size: 2.64vw;
  font-weight: 500;
  letter-spacing: -0.1vw;
  line-height: 115%;
}
.c2 .c2-exhibit-headline {
  font-size: 1.39vw;
  font-weight: 500;
  line-height: 130%;
}
.c2 .c2-exhibit-partners {
  max-width: 30vw;
  color: var(--c2-lavender);
  font-size: 0.9vw;
  line-height: 150%;
}
.c2 .c2-exhibit-partners b {
  color: #fff;
  font-weight: 500;
}
.c2 .c2-exhibit-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.7vw;
  margin-top: 0.7vw;
  padding: 1vw 2.43vw;
  border-radius: 0.97vw;
  background-image: var(--c2-button);
  background-position: left;
  background-size: 300%;
  color: #fff;
  font-size: 0.97vw;
  font-weight: 500;
  line-height: 130%;
  transition: background-position 1s var(--c2-ease);
}
.c2 .c2-exhibit-cta span {
  transition: transform 0.6s var(--c2-ease);
}
.c2 a.c2-exhibit-link:hover .c2-exhibit-cta {
  background-position: right;
}
.c2 a.c2-exhibit-link:hover .c2-exhibit-cta span {
  transform: translateX(0.35vw);
}
.c2 .c2-exhibit-stage {
  position: relative;
  z-index: 1;
}
.c2 .c2-exhibit-stage .c2-frame {
  transform: translateY(0.7vw);
  transition: transform 1s var(--c2-ease), box-shadow 1s var(--c2-ease);
}
.c2 a.c2-exhibit-link:hover .c2-exhibit-stage .c2-frame {
  transform: translateY(-0.7vw) scale(1.015);
  box-shadow: 0 4vw 7vw -2.5vw rgba(6, 3, 16, 0.9);
}

/* ---------- homepage: selected work ---------- */
.c2 .c2-selected {
  padding: 7vw 0 3vw;
  background-color: var(--c2-paper);
}
.c2 .c2-selected a.c2-exhibit-link {
  background-color: var(--c2-night);
}
.c2 .c2-selected .c2-quote {
  margin-top: 4.17vw;
}
.c2 .c2-selected-more {
  display: flex;
  justify-content: center;
  margin-top: 3vw;
}

/* ---------- what we do / our approach: built with this ---------- */
.c2 .c2-proof {
  padding: 5vw 0;
  background-color: var(--c2-night);
}
/* What we do's sections sit on the site's plum dark (#190f2a), not night. */
.c2 .c2-proof--plum {
  background-color: #190f2a;
}
.c2 .c2-proof-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.04vw;
  margin-bottom: 2.08vw;
}
.c2 .c2-proof-lede {
  color: var(--c2-lavender);
  font-size: 1.11vw;
}
.c2 .c2-proof-list {
  display: grid;
  gap: 0.83vw;
}
.c2 a.c2-proof-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 2.08vw;
  overflow: hidden;
  padding: 1.67vw 2.08vw;
  border: 1px solid rgba(201, 182, 255, 0.1);
  border-radius: 1.67vw;
  background-color: rgba(41, 31, 57, 0.45);
  color: #fff;
  text-decoration: none;
  transition: border-color 0.6s var(--c2-ease);
}
.c2 a.c2-proof-item::before {
  content: "";
  position: absolute;
  inset: -40% 45% -40% -10%;
  background: radial-gradient(50% 50% at 30% 50%, color-mix(in srgb, var(--c2-tint) 32%, transparent), transparent 70%);
  opacity: 0.5;
  transition: opacity 0.8s var(--c2-ease);
  pointer-events: none;
}
.c2 a.c2-proof-item:hover {
  border-color: rgba(201, 182, 255, 0.24);
}
.c2 a.c2-proof-item:hover::before {
  opacity: 1;
}
.c2 a.c2-proof-item > * {
  position: relative;
  z-index: 1;
}
.c2 .c2-proof-item .c2-logo-chip {
  width: 3.33vw;
  height: 3.33vw;
  border-radius: 0.97vw;
}
.c2 .c2-proof-copy {
  display: grid;
  gap: 0.28vw;
}
.c2 .c2-proof-name {
  font-size: 1.39vw;
  font-weight: 500;
  letter-spacing: -0.03vw;
  line-height: 125%;
}
.c2 .c2-proof-line {
  color: var(--c2-lavender);
  font-size: 0.97vw;
  line-height: 140%;
}
.c2 .c2-proof-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.35vw;
  max-width: 22vw;
}
.c2 .c2-proof-tags span {
  padding: 0.42vw 0.69vw;
  border-radius: 100vw;
  background-color: rgba(207, 177, 255, 0.1);
  font-size: 0.76vw;
  line-height: 1;
}
.c2 .c2-proof-item .c2-exhibit-cta {
  margin-top: 0;
}
.c2 a.c2-proof-item:hover .c2-exhibit-cta {
  background-position: right;
}

/* ---------- tablet ---------- */
@media screen and (max-width: 767px) {
  .c2 .c2-container,
  .c2 .c2-owned .c2-container {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }
  .c2 .c2-h1,
  .c2 .c2-h3,
  .c2 .c2-outcome {
    font-size: 6.333vw;
    letter-spacing: -0.15vw;
  }
  .c2 .c2-hero {
    padding: 30vw 0 10vw;
  }
  .c2 .c2-hero-inner {
    max-width: none;
    gap: 4.67vw;
    padding: 0 16px;
  }
  .c2 .c2-lede,
  .c2 .c2-head .body_16 {
    max-width: none;
  }
  .c2 .c2-hero-stage {
    width: calc(100% - 32px);
    margin-top: 10vw;
    margin-bottom: -14vw;
  }
  .c2 .c2-back {
    font-size: 2.67vw;
  }
  .c2 .c2-facts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4vw;
    width: 100%;
    padding: 4vw;
    border-radius: 3.5vw;
  }
  .c2 .c2-facts dt {
    font-size: 2vw;
  }
  .c2 .c2-facts dd {
    gap: 1.5vw;
    font-size: 2.67vw;
  }
  .c2 .c2-logo-chip {
    width: 5vw;
    height: 5vw;
    border-radius: 1.4vw;
  }
  .c2 .c2-status {
    gap: 1vw;
    font-size: 2.33vw;
  }
  .c2 .c2-status::before {
    width: 1.3vw;
    height: 1.3vw;
  }
  .c2 .c2-frame {
    border-radius: 3vw;
  }
  .c2 .c2-frame-bar {
    gap: 1vw;
    height: 4.5vw;
    padding: 0 2.5vw;
  }
  .c2 .c2-frame-bar i {
    width: 1.4vw;
    height: 1.4vw;
  }
  .c2 .c2-bridge {
    height: 34vw;
  }
  .c2 .c2-section {
    padding: 16vw 0;
  }
  .c2 .c2-head {
    max-width: none;
    gap: 4vw;
    margin-bottom: 9vw;
  }
  .c2 .c2-challenge {
    padding-top: 10vw;
  }
  .c2 .c2-partners {
    padding-top: 6vw;
    padding-bottom: 8vw;
  }
  .c2 .c2-partners .c2-head {
    margin-bottom: 6vw;
  }
  .c2 .c2-marquee {
    padding: 3vw 0;
  }
  .c2 .c2-marquee-item {
    height: 8vw;
    margin-right: 9vw;
  }
  .c2 .c2-marquee-item img {
    max-width: 22vw;
    height: 7vw;
  }
  .c2 .c2-industries {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 5vw;
    margin-top: 7vw;
  }
  .c2 .c2-industries > div {
    gap: 1vw;
    padding: 3vw 0;
  }
  .c2 .c2-industries dt {
    font-size: 2.33vw;
  }
  .c2 .c2-industries dd {
    font-size: 2.2vw;
  }
  .c2 .c2-source {
    margin-top: 4vw;
    font-size: 2vw;
  }
  .c2 .c2-exhibit-partners {
    max-width: none;
    font-size: 2.33vw;
  }
  .c2 .c2-selected {
    padding: 14vw 0 6vw;
  }
  .c2 .c2-selected .c2-quote {
    margin-top: 9vw;
  }
  .c2 .c2-selected-more {
    margin-top: 7vw;
  }
  .c2 .c2-proof {
    padding: 12vw 0;
  }
  .c2 .c2-proof-head {
    gap: 2vw;
    margin-bottom: 5vw;
  }
  .c2 .c2-proof-lede {
    font-size: 2.67vw;
  }
  .c2 a.c2-proof-item {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3vw 4vw;
    padding: 4vw;
    border-radius: 4vw;
  }
  .c2 .c2-proof-item .c2-logo-chip {
    width: 8vw;
    height: 8vw;
    border-radius: 2.2vw;
  }
  .c2 .c2-proof-name {
    font-size: 3.33vw;
  }
  .c2 .c2-proof-line {
    font-size: 2.33vw;
  }
  .c2 .c2-proof-tags {
    grid-column: 1 / -1;
    justify-content: flex-start;
    max-width: none;
    gap: 1vw;
  }
  .c2 .c2-proof-tags span {
    padding: 1.1vw 1.8vw;
    font-size: 1.95vw;
  }
  .c2 .c2-proof-item .c2-exhibit-cta {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .c2 .c2-compare {
    grid-template-columns: 1fr;
    gap: 6vw;
  }
  .c2 .c2-compare-col,
  .c2 .c2-cards {
    gap: 2vw;
  }
  .c2 .c2-compare-label {
    font-size: 2.33vw;
  }
  .c2 .c2-mark {
    width: 26vw;
  }
  .c2 .c2-mark::before {
    inset: -0.9vw;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 0.8vw), #000 calc(100% - 0.7vw));
    mask: radial-gradient(farthest-side, transparent calc(100% - 0.8vw), #000 calc(100% - 0.7vw));
  }
  .c2 .c2-owned {
    padding: 20vw 0 18vw;
  }
  .c2 .c2-statement {
    max-width: none;
    font-size: 4.27vw;
  }
  .c2 .c2-capabilities {
    padding: 0 16px;
    margin-bottom: 12vw;
  }
  .c2 .c2-capabilities .case-card {
    min-height: 0;
    padding-bottom: 5.67vw;
  }
  .c2 .c2-capabilities .card-initial {
    gap: 6vw;
  }
  .c2 .c2-capabilities .div-block-495 {
    row-gap: 2.67vw;
  }
  .c2 .c2-card-top {
    gap: 2vw;
  }
  .c2 .c2-card-phase {
    font-size: 1.8vw;
  }
  .c2 .c2-card-summary {
    font-size: 2.33vw;
  }
  .c2 .c2-card-module {
    gap: 1.5vw;
    padding: 2.5vw;
    border-radius: 2.67vw;
  }
  .c2 .c2-card-label {
    font-size: 1.67vw;
  }
  .c2 .c2-card-tags {
    gap: 1vw;
  }
  .c2 .c2-card-tags span {
    padding: 1.1vw 1.6vw;
    font-size: 1.95vw;
  }
  .c2 .c2-card-output {
    gap: 1vw;
    margin-top: 3.5vw;
    padding-top: 3vw;
  }
  .c2 .c2-card-output-value {
    font-size: 2.33vw;
  }
  .c2 .c2-deliver-head {
    margin-bottom: 4vw;
  }
  .c2 .c2-deliver-list {
    grid-template-columns: 1fr;
  }
  .c2 .c2-deliver-list li {
    gap: 3vw;
    padding: 3.5vw 0;
    font-size: 3.2vw;
  }
  .c2 .c2-inside {
    padding: 12vw 0 18vw;
  }
  .c2 .c2-inside-grid {
    grid-template-columns: 1fr;
    gap: 12vw;
  }
  .c2 .c2-inside-copy {
    position: static;
    gap: 4vw;
  }
  .c2 .c2-screens {
    gap: 12vw;
  }
  .c2 .c2-screen {
    gap: 3.5vw;
  }
  .c2 .c2-screen-copy {
    max-width: none;
    gap: 1.5vw;
  }
  .c2 .c2-stack {
    padding: 6vw 0 24vw;
  }
  .c2 .c2-tags {
    max-width: none;
  }
  .c2 .c2-ai-note {
    margin-top: 5vw;
  }
  .c2 .c2-close > .c2-container {
    padding-top: 18vw;
  }
  .c2 .c2-close .div-block-410 {
    padding-top: 16vw;
  }
  .c2 .c2-outcome {
    max-width: none;
  }
  .c2 .c2-quote {
    max-width: none;
    gap: 3.5vw;
    margin-top: 12vw;
  }
  .c2 .c2-quote blockquote {
    font-size: 4.27vw;
  }
  .c2 .c2-quote blockquote::before {
    font-size: 12vw;
  }
  .c2 .c2-quote figcaption {
    gap: 2vw;
    font-size: 2.5vw;
  }
  .c2 .c2-actions {
    gap: 2vw;
  }
  .c2 .c2-draft {
    margin-left: 1.5vw;
    padding: 0.8vw 1.5vw;
    font-size: 1.8vw;
  }
  .c2 .c2-work-list {
    padding: 6vw 0 24vw;
  }
  .c2 .c2-filters {
    gap: 1.5vw;
    margin-bottom: 6vw;
  }
  .c2 .c2-filters button {
    padding: 2vw 3.5vw;
    font-size: 2.33vw;
  }
  .c2 .c2-exhibits {
    gap: 5vw;
  }
  .c2 a.c2-exhibit-link {
    grid-template-columns: 1fr;
    gap: 5vw;
    padding: 5vw;
    border-radius: 5.33vw;
  }
  .c2 .c2-exhibit-stage {
    order: -1;
  }
  .c2 .c2-exhibit-copy {
    gap: 3vw;
  }
  .c2 .c2-exhibit-meta {
    gap: 2.5vw;
  }
  .c2 .c2-exhibit-client {
    gap: 2vw;
    font-size: 2.67vw;
  }
  .c2 .c2-exhibit-title {
    font-size: 4.8vw;
  }
  .c2 .c2-exhibit-headline {
    font-size: 2.67vw;
  }
  .c2 .c2-exhibit-cta {
    gap: 1.5vw;
    padding: 2.5vw 5vw;
    border-radius: 1.67vw;
    font-size: 2.33vw;
  }
}

/* ---------- phone ---------- */
@media screen and (max-width: 479px) {
  .c2 .c2-h1,
  .c2 .c2-h3,
  .c2 .c2-outcome {
    font-size: 6.5vw;
  }
  .c2 .c2-hero {
    padding-top: 36vw;
  }
  .c2 .c2-back {
    font-size: 3.73vw;
  }
  .c2 .c2-facts dt {
    font-size: 3.2vw;
  }
  .c2 .c2-facts dd {
    font-size: 3.73vw;
  }
  .c2 .c2-logo-chip {
    width: 7vw;
    height: 7vw;
    border-radius: 2vw;
  }
  .c2 .c2-status {
    font-size: 3.73vw;
  }
  .c2 .c2-status::before {
    width: 2vw;
    height: 2vw;
  }
  .c2 .c2-compare-label {
    font-size: 3.2vw;
  }
  .c2 .c2-mark {
    width: 34vw;
  }
  .c2 .c2-statement {
    font-size: 5.33vw;
  }
  .c2 .c2-capabilities .case-card {
    padding-bottom: 9.07vw;
  }
  .c2 .c2-capabilities .card-initial {
    gap: 9vw;
  }
  .c2 .c2-capabilities .div-block-495 {
    row-gap: 4.27vw;
  }
  .c2 .c2-card-phase {
    font-size: 2.93vw;
  }
  .c2 .c2-card-summary {
    font-size: 3.73vw;
  }
  .c2 .c2-card-module {
    gap: 2.4vw;
    padding: 4vw;
    border-radius: 4.27vw;
  }
  .c2 .c2-card-label {
    font-size: 2.67vw;
  }
  .c2 .c2-card-tags {
    gap: 1.6vw;
  }
  .c2 .c2-card-tags span {
    padding: 1.8vw 2.6vw;
    font-size: 3.2vw;
  }
  .c2 .c2-card-output {
    gap: 1.6vw;
    margin-top: 5.33vw;
    padding-top: 4.8vw;
  }
  .c2 .c2-card-output-value {
    font-size: 3.73vw;
  }
  .c2 .c2-marquee-item {
    height: 11vw;
    margin-right: 12vw;
  }
  .c2 .c2-marquee-item img {
    max-width: 30vw;
    height: 9.6vw;
  }
  .c2 .c2-industries dt {
    font-size: 3.73vw;
  }
  .c2 .c2-industries dd {
    font-size: 3.47vw;
  }
  .c2 .c2-source {
    font-size: 3.2vw;
  }
  .c2 .c2-exhibit-partners {
    font-size: 3.47vw;
  }
  .c2 .c2-proof-lede {
    font-size: 3.73vw;
  }
  .c2 .c2-proof-item .c2-logo-chip {
    width: 11vw;
    height: 11vw;
    border-radius: 3vw;
  }
  .c2 .c2-proof-name {
    font-size: 4.8vw;
  }
  .c2 .c2-proof-line {
    font-size: 3.73vw;
  }
  .c2 .c2-proof-tags span {
    padding: 1.8vw 2.8vw;
    font-size: 3.2vw;
  }

  /* Calmer, less dense type on phones for the added sections only. */
  .c2 .c2-h1,
  .c2 .c2-h3 {
    font-size: 6vw;
  }
  .c2 .c2-outcome {
    font-size: 5.6vw;
  }
  .c2 .c2-hero .title_2_20 {
    font-size: 3.73vw;
  }
  .c2 .c2-hero-inner {
    gap: 4vw;
  }
  .c2 .c2-lede,
  .c2 .c2-head .body_16 {
    font-size: 3.47vw;
    line-height: 150%;
  }
  .c2 .c2-back {
    font-size: 3.47vw;
  }
  .c2 .c2-facts {
    gap: 4vw 3vw;
    padding: 4.5vw;
  }
  .c2 .c2-facts dt {
    font-size: 2.67vw;
  }
  .c2 .c2-facts dd {
    font-size: 3.47vw;
  }
  .c2 .c2-logo-chip {
    width: 6vw;
    height: 6vw;
    border-radius: 1.6vw;
  }
  .c2 .c2-statement {
    font-size: 4.53vw;
    line-height: 140%;
  }
  .c2 .caption {
    padding: 2.67vw 3.73vw;
    font-size: 3.2vw;
  }
  .c2 .tag-solutions {
    height: 8.5vw;
    padding-left: 3.2vw;
    padding-right: 3.2vw;
    font-size: 3.2vw;
  }
  .c2 .list-card {
    font-size: 3.73vw;
  }
  .c2 .c2-capabilities .title_24,
  .c2 .c2-screen-copy .title_24 {
    font-size: 4.53vw;
  }
  .c2 .c2-card-summary,
  .c2 .c2-card-output-value,
  .c2 .c2-screen-copy .body_15 {
    font-size: 3.47vw;
  }
  .c2 .c2-card-tags span {
    font-size: 2.93vw;
  }
  .c2 .c2-deliver-list li {
    font-size: 3.73vw;
  }
  .c2 .c2-quote blockquote {
    font-size: 4.53vw;
  }
  .c2 .c2-exhibit-meta {
    flex-wrap: nowrap;
    gap: 2.67vw;
  }
  .c2 .c2-exhibit-meta .caption {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
  }
  .c2 .c2-exhibit-meta .c2-status {
    flex: none;
  }
  .c2 .c2-status {
    font-size: 3.47vw;
  }
  .c2 .c2-exhibit-client {
    font-size: 3.47vw;
  }
  .c2 .c2-exhibit-title {
    font-size: 5.6vw;
  }
  .c2 .c2-exhibit-headline {
    font-size: 3.73vw;
  }
  .c2 .c2-exhibit-partners {
    font-size: 3.2vw;
  }
  .c2 .c2-exhibit-cta {
    padding: 3vw 5vw;
    font-size: 3.47vw;
  }
  .c2 .c2-proof-name {
    font-size: 4.27vw;
  }
  .c2 .c2-industries dt {
    font-size: 3.47vw;
  }
  .c2 .c2-industries dd {
    font-size: 3.2vw;
  }
  .c2 .c2-deliver-list li {
    font-size: 4.27vw;
  }
  .c2 .c2-quote blockquote {
    font-size: 5.33vw;
  }
  .c2 .c2-quote figcaption {
    font-size: 3.73vw;
  }
  .c2 .c2-draft {
    font-size: 2.67vw;
  }
  .c2 .c2-filters button,
  .c2 .c2-exhibit-cta {
    font-size: 3.73vw;
  }
  .c2 .c2-exhibit-client {
    font-size: 3.73vw;
  }
  .c2 .c2-exhibit-title {
    font-size: 6.4vw;
  }
  .c2 .c2-exhibit-headline {
    font-size: 4.27vw;
  }
  .c2 a.c2-exhibit-link {
    border-radius: 8.53vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c2 *,
  .c2 *::before,
  .c2 *::after {
    animation: none !important;
    transition: none !important;
  }
  /* Partner logos sit still in a wrapped row instead of scrolling. */
  .c2 .c2-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .c2 .c2-marquee-track {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 2vw;
    width: 83vw;
    margin: 0 auto;
  }
  .c2 .c2-marquee-item[aria-hidden="true"] {
    display: none;
  }
}

/* ================================================================
   Products: the product's own interface, embedded as live HTML
   ================================================================ */

/* Screens are the product's real HTML at its own width (390 px phones), exported
   with demo data. cosmiron-2.js sets --c2-ui-scale (and the track's height) so each
   one fills its view. Scaling uses transform, not zoom: iOS Safari re-inflates
   zoomed-down text. */
.c2 .c2-ui-view {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  align-items: center;
  overflow: hidden;
  /* The screen's own 390 px width must never size its view; the view sizes the zoom. */
  contain: inline-size;
}
.c2 .c2-ui-scroll {
  position: relative;
  flex: none;
  width: 100%;
}
.c2 .c2-ui {
  transform: scale(var(--c2-ui-scale, 1));
  transform-origin: 0 0;
}
/* Each screen's reset (all: revert) turns iOS text autosizing back on; keep it off. */
.c2 .c2-ui,
.c2 .c2-ui * {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.c2 .c2-logo-chip[style*="--c2-chip"] {
  background-color: var(--c2-chip);
}
.c2 .c2-label {
  color: var(--c2-dusk);
  font-size: 0.76vw;
  font-weight: 500;
  letter-spacing: 0.08em;
  line-height: 120%;
  text-transform: uppercase;
}

/* A quiet phone: hairline bezel, no notch. */
.c2 .c2-device {
  position: relative;
  z-index: 1;
  flex: none;
  width: 21vw;
  padding: 0.49vw;
  border: 1px solid rgba(201, 182, 255, 0.2);
  border-radius: 3.06vw;
  background: linear-gradient(155deg, #2b2342, #15111f 38%, #0d0a15);
  box-shadow: 0 3vw 6vw -2.5vw rgba(6, 3, 16, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.c2 .c2-device .c2-ui-view {
  aspect-ratio: 390 / 844;
  justify-content: flex-start;
  padding-top: 0.97vw;
  border-radius: 2.57vw;
  background-color: #0a0a1a;
}

/* ---------- product hero ---------- */
/* The phone's glow is wider than small screens; clip it sideways only. */
.c2 .c2-hero--product {
  overflow-x: clip;
}
.c2 .c2-hero-stage--device {
  display: flex;
  justify-content: center;
  width: auto;
}
.c2 .c2-hero-stage--device::before {
  content: "";
  position: absolute;
  inset: 6% -80% 20%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--c2-tint) 55%, transparent), rgba(172, 36, 255, 0.18) 55%, transparent 72%);
  filter: blur(3vw);
  pointer-events: none;
}
.c2 .c2-hero-stage--device .c2-device {
  width: 23vw;
}

/* ---------- product: the problem, each with its screen ---------- */
.c2 .c2-problems {
  padding-top: 4vw;
}
.c2 .c2-problem-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.39vw;
}
.c2 .c2-problem {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 2.08vw;
  padding: 2.08vw;
  border: 1px solid rgba(26, 11, 84, 0.06);
  border-radius: 2.22vw;
  background-color: #f5f3fa;
}
.c2 .c2-problem-copy {
  display: grid;
  align-content: start;
  gap: 0.83vw;
}
.c2 .c2-problem-title {
  margin: 0;
  color: var(--c2-ink);
  font-size: 1.94vw;
  font-weight: 500;
  letter-spacing: -0.05vw;
  line-height: 120%;
  text-wrap: balance;
}
.c2 .c2-problem-fix {
  max-width: 34vw;
  color: #675e80;
}
.c2 .c2-problem-stage {
  display: flex;
  justify-content: center;
  align-items: stretch;
  height: 22vw;
  padding: 1.67vw 1.67vw 0;
  overflow: hidden;
  border-radius: 1.67vw;
  background:
    radial-gradient(80% 90% at 50% 120%, color-mix(in srgb, var(--c2-tint) 42%, transparent), transparent 70%),
    #0a0a1a;
}
.c2 .c2-problem-stage .c2-ui-view--tile {
  width: 25vw;
  border-radius: 1.11vw 1.11vw 0 0;
}

/* ---------- product: inside, screen by screen ---------- */
.c2 .c2-inside--product {
  padding-top: 9vw;
}
.c2 .c2-uifigs {
  display: grid;
  gap: 8vw;
}
.c2 .c2-uifig {
  display: grid;
  grid-template-columns: 26vw minmax(0, 1fr);
  align-items: center;
  gap: 5.5vw;
  margin: 0;
}
.c2 .c2-uifig--flip {
  grid-template-columns: minmax(0, 1fr) 26vw;
}
.c2 .c2-uifig--flip .c2-uifig-copy {
  order: 2;
}
.c2 .c2-uifig-copy {
  display: grid;
  justify-items: start;
  gap: 1.11vw;
  text-align: left;
}
.c2 .c2-uifig-title {
  color: #fff;
  font-size: 2.36vw;
  font-weight: 500;
  letter-spacing: -0.06vw;
  line-height: 120%;
  text-wrap: balance;
}
.c2 .c2-uifig-body {
  color: var(--c2-lavender);
  font-size: 1.11vw;
  line-height: 155%;
}
.c2 .c2-uifig-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2.5vw;
}
.c2 .c2-uifig-stage::before,
.c2 .c2-ai-stage::before {
  content: "";
  position: absolute;
  inset: 10% -4% 12%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 55%, color-mix(in srgb, var(--c2-tint) 34%, transparent), rgba(172, 36, 255, 0.14) 55%, transparent 72%);
  filter: blur(2.5vw);
  pointer-events: none;
}
.c2 .c2-uifig-stage .c2-device {
  width: 19vw;
}
.c2 .c2-uifig-stage .c2-device:nth-child(2) {
  margin-top: 5vw;
}
.c2 .c2-uifig-stage--float {
  justify-content: flex-start;
  padding-left: 6vw;
}
.c2 .c2-uifig-float {
  position: absolute;
  right: 0;
  bottom: 4vw;
  z-index: 2;
  width: 27vw;
  padding: 0.49vw;
  border: 1px solid rgba(201, 182, 255, 0.2);
  border-radius: 1.67vw;
  background-color: #0d0a15;
  box-shadow: 0 3vw 6vw -2vw rgba(6, 3, 16, 0.9);
}
.c2 .c2-uifig-float .c2-ui-view--tile {
  border-radius: 1.25vw;
}

/* ---------- product: AI features ---------- */
.c2 .c2-ai {
  position: relative;
  padding: 4vw 0 10vw;
  background: linear-gradient(var(--c2-night), #190f2a 16%, #190f2a 84%, var(--c2-night));
}
.c2 .c2-ai-lead {
  display: grid;
  justify-items: start;
  gap: 0.97vw;
  margin-top: 1.39vw;
  padding: 1.67vw;
  border: 1px solid rgba(201, 182, 255, 0.14);
  border-radius: 1.67vw;
  background-color: rgba(41, 31, 57, 0.45);
}
.c2 .c2-ai-lead .title_24,
.c2 .c2-ai-copy .title_24 {
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}
.c2 .c2-ai-list {
  display: grid;
  gap: 5vw;
}
.c2 .c2-ai-item {
  display: grid;
  grid-template-columns: 17vw minmax(0, 1fr);
  align-items: center;
  gap: 3.47vw;
  margin: 0;
}
.c2 .c2-ai-stage {
  position: relative;
}
.c2 .c2-ai-stage .c2-device {
  width: 17vw;
}
.c2 .c2-ai-paper {
  position: absolute;
  top: 14%;
  left: -4.5vw;
  z-index: 0;
  width: 10.5vw;
  height: auto;
  border-radius: 0.35vw;
  box-shadow: 0 2vw 4vw -1.5vw rgba(6, 3, 16, 0.8);
  transform: rotate(-8deg);
}
.c2 .c2-ai-copy {
  display: grid;
  justify-items: start;
  gap: 0.97vw;
  text-align: left;
}
.c2 .c2-ai-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.56vw 0.97vw;
}
.c2 .c2-model {
  display: inline-flex;
  align-items: center;
  gap: 0.49vw;
  padding: 0.42vw 0.83vw;
  border: 1px solid rgba(201, 182, 255, 0.22);
  border-radius: 100vw;
  background-color: rgba(124, 58, 237, 0.16);
  color: #e6dcff;
  font-size: 0.83vw;
  font-weight: 500;
  line-height: 1.2;
}
.c2 .c2-model::before {
  content: "";
  width: 0.42vw;
  height: 0.42vw;
  border-radius: 50%;
  background-image: var(--c2-spectrum);
}

/* ---------- product: the signing flow ---------- */
.c2 .c2-craft .c2-head {
  max-width: 58vw;
}
.c2 .c2-flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.78vw;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c2 .c2-flow-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 1.39vw;
  min-width: 0;
}
.c2 .c2-flow .c2-device {
  width: 100%;
}
.c2 .c2-flow-label {
  display: flex;
  align-items: baseline;
  gap: 0.7vw;
  color: var(--c2-ink);
  font-size: 1.11vw;
  font-weight: 500;
  line-height: 135%;
  text-align: center;
}
.c2 .c2-flow-label b {
  color: var(--c2-dusk);
  font-size: 0.83vw;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.c2 .c2-proofpoints {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 2.78vw;
  margin: 5vw 0 0;
  padding: 0;
  border-top: 1px solid rgba(26, 11, 84, 0.1);
  list-style: none;
}
.c2 .c2-proofpoints li {
  display: flex;
  align-items: flex-start;
  gap: 0.83vw;
  padding: 1.39vw 0;
  border-bottom: 1px solid rgba(26, 11, 84, 0.1);
  color: var(--c2-ink);
  font-size: 1.11vw;
  line-height: 145%;
}
.c2 .c2-proofpoints .bullet-icon {
  margin-top: 0.15vw;
}
.c2 .c2-craft + .c2-stack {
  padding-top: 9vw;
}

/* ---------- product card on Work and Home ---------- */
.c2 .c2-exhibit-stage--devices {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2.08vw;
  margin-bottom: -5.5vw;
}
.c2 .c2-exhibit-stage--devices .c2-device {
  width: 15.3vw;
  transform: translateY(0.7vw);
  transition: transform 1s var(--c2-ease);
}
.c2 .c2-exhibit-stage--devices .c2-device:nth-child(2) {
  margin-top: 3.5vw;
}
.c2 .c2-exhibit-stage--devices .c2-device .c2-ui-view {
  aspect-ratio: 390 / 700;
}
.c2 a.c2-exhibit-link:hover .c2-exhibit-stage--devices .c2-device {
  transform: translateY(-0.7vw);
}

@media screen and (max-width: 767px) {
  .c2 .c2-label {
    font-size: 2.2vw;
  }
  .c2 .c2-device {
    padding: 1.1vw;
    border-radius: 7vw;
  }
  .c2 .c2-device .c2-ui-view {
    padding-top: 2.2vw;
    border-radius: 5.9vw;
  }
  .c2 .c2-hero-stage--device {
    width: auto;
  }
  .c2 .c2-hero-stage--device .c2-device {
    width: 60vw;
  }
  .c2 .c2-problems {
    padding-top: 6vw;
  }
  .c2 .c2-problem-grid {
    grid-template-columns: 1fr;
    gap: 4vw;
  }
  .c2 .c2-problem {
    gap: 5vw;
    padding: 5vw;
    border-radius: 5.33vw;
  }
  .c2 .c2-problem-copy {
    gap: 2vw;
  }
  .c2 .c2-problem-title {
    font-size: 4.27vw;
  }
  .c2 .c2-problem-fix {
    max-width: none;
  }
  .c2 .c2-problem-stage {
    height: 56vw;
    padding: 4vw 4vw 0;
    border-radius: 4vw;
  }
  .c2 .c2-problem-stage .c2-ui-view--tile {
    width: 66vw;
    border-radius: 2.67vw 2.67vw 0 0;
  }
  .c2 .c2-inside--product {
    padding-top: 14vw;
  }
  .c2 .c2-uifigs {
    gap: 16vw;
  }
  .c2 .c2-uifig,
  .c2 .c2-uifig--flip {
    grid-template-columns: 1fr;
    gap: 7vw;
  }
  .c2 .c2-uifig--flip .c2-uifig-copy {
    order: 0;
  }
  .c2 .c2-uifig-copy {
    gap: 2.5vw;
  }
  .c2 .c2-uifig-title {
    font-size: 4.8vw;
  }
  .c2 .c2-uifig-body {
    font-size: 2.67vw;
  }
  .c2 .c2-uifig-stage {
    gap: 4vw;
  }
  .c2 .c2-uifig-stage .c2-device {
    width: 42vw;
  }
  .c2 .c2-uifig-stage .c2-device:nth-child(2) {
    margin-top: 8vw;
  }
  .c2 .c2-uifig-stage--float {
    padding-left: 4vw;
  }
  .c2 .c2-uifig-float {
    bottom: 6vw;
    width: 54vw;
    padding: 1vw;
    border-radius: 3.5vw;
  }
  .c2 .c2-uifig-float .c2-ui-view--tile {
    border-radius: 2.67vw;
  }
  .c2 .c2-ai {
    padding: 8vw 0 18vw;
  }
  .c2 .c2-ai-lead {
    gap: 2.5vw;
    margin-top: 3vw;
    padding: 4.5vw;
    border-radius: 4vw;
  }
  .c2 .c2-ai-list {
    gap: 14vw;
  }
  .c2 .c2-ai-item {
    grid-template-columns: 1fr;
    gap: 6vw;
  }
  .c2 .c2-ai-stage {
    display: flex;
    justify-content: center;
  }
  .c2 .c2-ai-stage .c2-device {
    width: 50vw;
  }
  .c2 .c2-ai-paper {
    top: 12%;
    left: 6vw;
    width: 26vw;
    border-radius: 1vw;
  }
  .c2 .c2-ai-copy {
    gap: 2.5vw;
  }
  .c2 .c2-ai-meta {
    gap: 1.5vw 2.5vw;
  }
  .c2 .c2-model {
    gap: 1.2vw;
    padding: 1.2vw 2.2vw;
    font-size: 2.2vw;
  }
  .c2 .c2-model::before {
    width: 1.1vw;
    height: 1.1vw;
  }
  .c2 .c2-craft .c2-head {
    max-width: none;
  }
  .c2 .c2-flow {
    display: flex;
    gap: 4vw;
    margin: 0 -16px;
    padding: 0 16px 3vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .c2 .c2-flow::-webkit-scrollbar {
    display: none;
  }
  .c2 .c2-flow-step {
    flex: none;
    width: 52vw;
    gap: 3vw;
    scroll-snap-align: center;
  }
  .c2 .c2-flow-label {
    gap: 1.5vw;
    font-size: 2.67vw;
  }
  .c2 .c2-flow-label b {
    font-size: 2vw;
  }
  .c2 .c2-proofpoints {
    grid-template-columns: 1fr;
    margin-top: 9vw;
  }
  .c2 .c2-proofpoints li {
    gap: 3vw;
    padding: 3.5vw 0;
    font-size: 3.2vw;
  }
  .c2 .c2-craft + .c2-stack {
    padding-top: 16vw;
  }
  .c2 .c2-exhibit-stage--devices {
    gap: 4vw;
    margin-bottom: 0;
  }
  .c2 .c2-exhibit-stage--devices .c2-device {
    width: 38vw;
  }
  .c2 .c2-exhibit-stage--devices .c2-device:nth-child(2) {
    margin-top: 0;
  }
  .c2 .c2-exhibit-stage--devices .c2-device .c2-ui-view {
    aspect-ratio: 390 / 600;
  }
}

@media screen and (max-width: 479px) {
  .c2 .c2-label {
    font-size: 2.93vw;
  }
  .c2 .c2-hero-stage--device .c2-device {
    width: 66vw;
  }
  .c2 .c2-problem-title {
    font-size: 4.8vw;
  }
  .c2 .c2-problem-fix,
  .c2 .c2-uifig-body {
    font-size: 3.47vw;
  }
  .c2 .c2-problem-stage {
    height: 72vw;
  }
  .c2 .c2-problem-stage .c2-ui-view--tile {
    width: 74vw;
  }
  .c2 .c2-uifig-title {
    font-size: 5.33vw;
  }
  .c2 .c2-uifig-stage .c2-device {
    width: 43vw;
  }
  .c2 .c2-uifig-float {
    width: 64vw;
  }
  .c2 .c2-ai-stage .c2-device {
    width: 58vw;
  }
  .c2 .c2-ai-paper {
    width: 30vw;
  }
  .c2 .c2-model {
    padding: 1.8vw 3.2vw;
    font-size: 3.2vw;
  }
  .c2 .c2-flow-step {
    width: 62vw;
  }
  .c2 .c2-flow-label {
    font-size: 3.73vw;
  }
  .c2 .c2-flow-label b {
    font-size: 3.2vw;
  }
  .c2 .c2-proofpoints li {
    font-size: 3.73vw;
  }
  .c2 .c2-exhibit-stage--devices .c2-device {
    width: 40vw;
  }
}

/* Without motion, tall screens scroll by hand instead of with the page. */
@media (prefers-reduced-motion: reduce) {
  .c2 .c2-ui-view[data-c2-scroll] {
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
}

/* ---------- product: kinetic headline ---------- */
.c2 .c2-kinetic .c2-line2 {
  will-change: transform, clip-path;
}

/* ---------- product: the pinned screen sequence ---------- */
/* One phone, held in place while its screens play through; the copy beside it
   changes with each group. Without motion or JS it falls back to a plain column. */
.c2 .c2-seq {
  position: relative;
  z-index: 7;
}
.c2 .c2-seq-inner {
  display: grid;
  grid-template-columns: 30vw minmax(0, 1fr);
  align-items: center;
  gap: 4vw;
  min-height: 100vh;
  padding: 5vw 0;
}
.c2 .c2-seq-copy {
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  gap: 3.5vw;
}
.c2 .c2-seq-step {
  grid-area: 1 / 1;
  display: grid;
  justify-items: start;
  gap: 1.11vw;
  margin: 0;
}
.c2 .c2-seq-step h3 {
  margin: 0;
}
.c2 .c2-seq-rail {
  grid-area: 2 / 1;
  display: grid;
  gap: 0.9vw;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c2 .c2-seq-rail li {
  display: flex;
  align-items: center;
  gap: 0.83vw;
  color: var(--c2-dusk);
  font-size: 0.97vw;
  line-height: 130%;
  transition: color 0.6s var(--c2-ease);
}
.c2 .c2-seq-rail li::before {
  content: "";
  width: 1.6vw;
  height: 1px;
  background-color: currentColor;
  opacity: 0.45;
  transition: width 0.6s var(--c2-ease), opacity 0.6s var(--c2-ease);
}
.c2 .c2-seq-rail li b {
  font-size: 0.76vw;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.c2 .c2-seq-rail li.is-active {
  color: #fff;
}
.c2 .c2-seq-rail li.is-active::before {
  width: 3.4vw;
  opacity: 1;
  background-color: transparent;
  background-image: var(--c2-spectrum);
  height: 2px;
}
.c2 .c2-seq-stage {
  position: relative;
  justify-self: center;
  width: 23vw;
  aspect-ratio: 390 / 844;
}
.c2 .c2-seq-stage::before {
  content: "";
  position: absolute;
  inset: 6% -45% 8%;
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--c2-tint) 45%, transparent), rgba(172, 36, 255, 0.16) 55%, transparent 72%);
  filter: blur(3vw);
  pointer-events: none;
}
.c2 .c2-seq-frame {
  position: absolute;
  inset: 0;
  width: 100%;
}
.c2 .c2-seq-frame .c2-ui-view {
  height: 100%;
  aspect-ratio: auto;
}
.c2 .c2-seq-float {
  position: absolute;
  right: -13vw;
  bottom: 7vw;
  z-index: 3;
  width: 25vw;
  padding: 0.49vw;
  border: 1px solid rgba(201, 182, 255, 0.2);
  border-radius: 1.67vw;
  background-color: #0d0a15;
  box-shadow: 0 3vw 6vw -2vw rgba(6, 3, 16, 0.9);
}
.c2 .c2-seq-float .c2-ui-view--tile {
  border-radius: 1.25vw;
}

@media screen and (max-width: 767px) {
  .c2 .c2-seq-inner {
    grid-template-columns: 1fr;
    gap: 7vw;
    min-height: 100svh;
    padding: 10vw 0;
  }
  .c2 .c2-seq-copy {
    gap: 0;
    min-height: 40vw;
    align-content: start;
  }
  .c2 .c2-seq-step {
    gap: 2.5vw;
  }
  .c2 .c2-seq-rail {
    display: none;
  }
  .c2 .c2-seq-stage {
    width: 62vw;
  }
  .c2 .c2-seq-float {
    right: -2vw;
    bottom: 10vw;
    width: 48vw;
    padding: 1vw;
    border-radius: 3.5vw;
  }
  /* The stage glow is wider than the phone; keep it inside a small screen. */
  .c2 .c2-seq-stage::before {
    inset: 6% -10% 8%;
  }
  .c2 .c2-seq-float .c2-ui-view--tile {
    border-radius: 2.67vw;
  }
}

@media screen and (max-width: 479px) {
  .c2 .c2-seq-stage {
    width: 66vw;
  }
  .c2 .c2-seq-float {
    width: 54vw;
  }
}

/* No motion (or no JS): the sequence reads as a plain column of screens. */
@media (prefers-reduced-motion: reduce) {
  .c2 .c2-seq-inner {
    display: block;
    min-height: 0;
  }
  .c2 .c2-seq-copy {
    display: block;
  }
  .c2 .c2-seq-step {
    margin-bottom: 5vw;
  }
  .c2 .c2-seq-stage {
    position: static;
    display: grid;
    justify-items: center;
    gap: 6vw;
    width: auto;
    aspect-ratio: auto;
  }
  .c2 .c2-seq-stage::before {
    display: none;
  }
  .c2 .c2-seq-frame {
    position: static;
    width: 24vw;
  }
  .c2 .c2-seq-frame .c2-ui-view {
    height: auto;
    aspect-ratio: 390 / 844;
  }
  .c2 .c2-seq-float {
    position: static;
    width: 26vw;
  }
}

/* ---------- product: the AI rail runs sideways while the heading holds ---------- */
.c2 .c2-ai-rail-view {
  min-width: 0;
}
/* The rail pins this wrapper, not the section: a pinned section sits in the page's
   flex column, where ScrollTrigger reserves no room and the next section rides over it. */
.c2 .c2-ai-pin {
  position: relative;
}
@media screen and (min-width: 992px) {
  .c2 .c2-ai--rail {
    overflow-x: clip;
  }
  .c2 .c2-ai--rail .c2-ai-pin {
    display: flex;
    align-items: center;
    min-height: 100vh;
  }
  .c2 .c2-ai--rail .c2-inside-grid {
    align-items: center;
    width: 83vw;
  }
  .c2 .c2-ai--rail .c2-ai-rail-view {
    overflow: hidden;
  }
  .c2 .c2-ai--rail .c2-ai-list {
    display: flex;
    flex-wrap: nowrap;
    gap: 4vw;
    width: max-content;
    will-change: transform;
  }
  /* One feature per window (83vw container less the 27vw copy column and its 6vw gap),
     so the rail settles with a whole phone in view rather than one cut by the edge. */
  .c2 .c2-ai--rail .c2-ai-item {
    width: 50vw;
  }
}

/* ---------- product: cards lean towards the cursor ---------- */
.c2 .c2-problem-grid {
  perspective: 1400px;
}
.c2 [data-c2-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---------- product: the signing seal draws itself ---------- */
.c2 .c2-seal {
  position: absolute;
  top: 7vw;
  right: 5vw;
  z-index: 1;
  width: 9vw;
  pointer-events: none;
}
.c2 .c2-seal svg {
  display: block;
  width: 100%;
  height: auto;
}
.c2 .c2-seal-ring,
.c2 .c2-seal-tick {
  fill: none;
}
@media screen and (max-width: 991px) {
  .c2 .c2-seal {
    top: 10vw;
    right: 16px;
    width: 18vw;
  }
}
@media screen and (max-width: 767px) {
  .c2 .c2-seal {
    display: none;
  }
}