/* Platform edition: preserve the established hero and contact workflow. */
:root { --paper: #fff; --soft: #f7f7f8; --button-spectrum: linear-gradient(115deg, #ad497f 0%, #8054b5 48%, #3974ad 100%); --button-glow: 0 8px 30px rgb(143 110 207 / 24%); }
.platform-site { letter-spacing: 0; }
.platform-site .primary-nav, .platform-site .eyebrow, .platform-site .ticker-strip span { letter-spacing: 0; }
.platform-site .site-header.is-scrolled, .platform-site .site-header.is-open { background: rgb(255 255 255 / 94%); }
.platform-site .section-kicker { display: block; margin-bottom: 48px; }
.platform-site .section-kicker .eyebrow, .platform-site .contact-section > .eyebrow { font-size: 20px; font-weight: 650; line-height: 1.4; margin-bottom: 14px; }
.platform-site .section-kicker > span { display: block; font-size: 14px; max-width: 680px; }
.platform-site h2, .platform-site h3 { letter-spacing: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.platform-site .hero h1 { font-size: 80px; }
.platform-site .hero-copy { font-size: 16px; }
.platform-site .hero .eyebrow { font-size: 12px; }
.platform-site .hero-image { object-position: center; }
.platform-site .hero-overlay {
  background: linear-gradient(90deg, rgb(255 255 255 / 92%) 0%, rgb(255 255 255 / 78%) 28%, rgb(255 255 255 / 12%) 58%, transparent 78%), linear-gradient(0deg, rgb(255 255 255 / 55%), transparent 28%);
}
.platform-site .new-vision { background: #000; color: #fff; }
.platform-site .new-vision .section-kicker { border-color: #ffffff26; }
.platform-site .new-vision .section-kicker > span,
.platform-site .new-vision .body-copy p { color: #c4c4ce; }
.platform-site .new-vision::after { display: none; }
.platform-site .new-vision::before { display: none; }
.platform-site .vision-field { opacity: .92; mix-blend-mode: normal; }
.platform-site .new-vision { padding-bottom: 190px; }
.platform-site .vision-grid { grid-template-columns: 1fr 1fr; gap: 70px; }
.platform-site .vision-grid h2, .platform-site .section-heading, .platform-site .ecosystem-intro h2, .platform-site .technology-intro h2 { font-size: 36px; font-weight: 600; line-height: 1.5; white-space: normal; margin: 0; }
.platform-site .body-copy p { font-size: 16px; line-height: 2; }
.platform-site .products-section { position: relative; isolation: isolate; background: #fff; }
.products-section::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 560px;
  pointer-events: none;
  background: url('assets/products-background-crystal-20261022.png') center bottom / cover no-repeat;
  mask-image: linear-gradient(#000 0%, #000 88%, transparent 100%);
}
.products-section > *, .ecosystem-section > *, .technology-section > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.platform-site .products-section > .section-heading { margin-inline: auto; }
.product-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 46px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.product-index a { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; padding: 24px; transition: box-shadow 350ms ease; min-width: 0; }
.product-index a + a { border-left: 1px solid #ddd; }
.product-index strong { font-size: 30px; font-weight: 550; grid-column: 1; line-height: 1.4; }
.product-index .index-number { font-size: 11px; color: #6c6c75; grid-column: 1 / -1; }
.product-index a > span:not(.index-number) { font-size: 12px; color: #62626a; }
.product-index a > span:last-child { grid-column: 2; grid-row: 2; font-size: 24px; }
.product-index a::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--button-spectrum);
  opacity: 0; transition: opacity 350ms ease;
}
.product-index a:is(:hover, :focus-visible) { color: #fff; box-shadow: var(--button-glow); }
.product-index a:is(:hover, :focus-visible) > span,
.product-index a:is(:hover, :focus-visible) > strong { color: #fff; }
.product-index a:is(:hover, :focus-visible)::before { opacity: 1; }
.product-index a > span:last-child { transition: transform 350ms ease, color 350ms ease; }
.product-index a:is(:hover, :focus-visible) > span:last-child { transform: translate(2px, -2px); color: #fff; }
.platform-site :is(.hero-actions .button, .studio-launch) {
  position: relative; isolation: isolate;
  transition: box-shadow 350ms ease, color 350ms ease, border-color 350ms ease;
}
.platform-site :is(.hero-actions .button, .studio-launch).primary { border-color: transparent; }
.platform-site :is(.hero-actions .button, .studio-launch).ghost { background: transparent; }
.platform-site :is(.hero-actions .button, .studio-launch)::before {
  content: ''; position: absolute; inset: -1px; z-index: -1;
  border-radius: inherit; pointer-events: none;
  background: var(--button-spectrum);
  opacity: 0; transition: opacity 350ms ease;
}
.platform-site :is(.hero-actions .button, .studio-launch):is(:hover, :focus-visible) {
  color: #fff; border-color: transparent; box-shadow: var(--button-glow);
}
.platform-site :is(.hero-actions .button, .studio-launch):is(:hover, :focus-visible)::before { opacity: 1; }
.product-story { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; padding: 86px 0; border-bottom: 1px solid #ddd; scroll-margin-top: 90px; }
.product-story:last-child { border: 0; padding-bottom: 0; }
.parallel-story .story-copy { order: 2; }
.product-name { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: baseline; font-size: 14px; font-weight: 600; }
.product-name small { font-size: 11px; font-weight: 400; color: #707078; }
.story-copy h3 { font-size: 30px; font-weight: 600; line-height: 1.55; margin: 25px 0; }
.story-copy > p { font-size: 15px; color: #53535b; line-height: 2; margin: 0; }
.product-details { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; padding: 0; margin: 24px 0 30px; font-size: 11px; color: #6a6a72; }
.product-details li + li { border-left: 1px solid #ddd; padding-left: 18px; }
.text-link { font-size: 13px; display: inline-block; border-bottom: 1px solid #999; padding: 0 0 6px; transition: border-color 160ms; }
.text-link:hover { border-color: #000; }
.text-link span { margin-left: 18px; }
.studio-launch { display: flex; width: fit-content; margin: 0 0 24px; cursor: pointer; }
.product-art { margin: 0; min-width: 0; aspect-ratio: 1.1; position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; background: #090909; color: white; overflow: hidden; border-radius: 4px; }
.visual-topline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 22px 24px; font-size: 11px; position: relative; z-index: 2; }
.visual-topline > span:last-child { color: #9b9ba6; font-size: 10px; }
.product-art > figcaption { position: relative; z-index: 2; padding: 20px 24px; font-size: 10px; color: #9b9ba6; }
.studio-art { margin: 0; min-width: 0; width: 100%; }
.studio-deck { display: block; position: relative; width: 100%; aspect-ratio: 1.25; border: 0; padding: 0; background: transparent; cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent; }
.studio-deck:focus-visible { outline: 2px solid #8054b5; outline-offset: 4px; border-radius: 4px; }
.studio-deck canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.studio-deck.is-rendered canvas { opacity: 1; }
.studio-deck .studio-fallback { position: absolute; top: 25%; left: 0; width: 100%; height: auto; transform: perspective(1000px) rotateX(20deg) rotateY(-28deg); }
.studio-deck.is-rendered .studio-fallback { visibility: hidden; }
.parallel-product { margin: 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.parallel-product-image { display: block; width: min(100%, 360px); height: auto; border-radius: 4px; }
.parallel-story .store-badges { width: 100%; gap: 12px; justify-content: flex-start; margin: 0 0 24px; }
.parallel-story .store-badge { min-width: 0; width: 154px; flex: 0 1 154px; height: 54px; padding: 7px 10px; gap: 8px; border-radius: 6px; box-shadow: none; text-align: left; cursor: pointer; }
.parallel-story .store-badge strong { font-size: 16px; white-space: nowrap; }
.parallel-story .store-badge:focus-visible { outline: 2px solid #8054b5; outline-offset: 4px; }
.parallel-art { background: #f0f0f3; color: #151515; align-items: center; }
.parallel-art .visual-topline { width: 100%; }
.parallel-art .visual-topline > span:last-child, .parallel-art > figcaption { color: #666672; }
.device-preview { position: relative; width: 42%; height: 77%; border-radius: 26px; background: #000; border: 5px solid #191919; overflow: hidden; box-shadow: 12px 18px 32px #0002; }
.device-preview > img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }
.device-camera { position: absolute; top: 7px; left: 36%; width: 28%; height: 10px; border-radius: 8px; background: #000; z-index: 1; }
.device-caption { position: absolute; bottom: 0; left: 0; right: 0; color: #fff; padding: 32px 15px 18px; background: linear-gradient(transparent, #000 60%); display: grid; gap: 4px; }
.device-caption small { font-size: 20px; }
.device-caption > span { font-size: 9px; }
.device-modes { display: flex; gap: 18px; border-top: 1px solid #ffffff40; padding-top: 8px; margin-top: 12px; font-size: 10px; }
.art-art { background: #ededf1; color: #171717; }
.art-product { margin: 0; min-width: 0; width: 100%; background: transparent; }
.art-product img { display: block; width: 100%; height: auto; }
.art-art .visual-topline > span:last-child, .art-art > figcaption { color: #666672; }
.art-gallery { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; padding: 10px 22px; min-height: 0; flex: 1; align-items: center; }
.art-gallery img { width: 100%; height: 85%; object-fit: cover; border-radius: 3px; }
.art-gallery img:first-child { object-position: 62% center; transform: translateY(-8px); }
.art-gallery img:nth-child(2) { object-position: center top; transform: translateY(12px); }
.art-gallery img:last-child { object-position: 54% center; transform: translateY(-8px); }
.gallery-categories { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; font-size: 10px; color: #666; padding-top: 16px; }
.platform-site .ecosystem-section { background: #f4f4f6; }
.ecosystem-intro, .technology-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: start; }
.ecosystem-intro > p, .technology-intro > p { font-size: 15px; line-height: 2; margin: 0; color: #595961; }
.creation-cycle { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid #cacacf; }
.creation-cycle li { padding: 22px 18px 0 0; position: relative; }
.creation-cycle li::before { content: ''; position: absolute; top: -3px; left: 0; width: 5px; height: 5px; background: #8886ac; border-radius: 50%; }
.creation-cycle small { font-size: 11px; color: #777; }
.creation-cycle h3 { font-size: 17px; font-weight: 550; margin: 16px 0 6px; }
.creation-cycle span { font-size: 12px; color: #73737c; }
.platform-site .technology-section { position: relative; isolation: isolate; overflow: hidden; background: #000; color: #fff; }
.technology-section > .technology-film { position: absolute; inset: 0; z-index: -1; max-width: none; margin: 0; background: #000; pointer-events: none; }
.technology-film video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: .3; }
.technology-film::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, #000, transparent 24%, transparent 76%, #000), linear-gradient(90deg, rgb(0 0 0 / 35%), transparent 55%, rgb(0 0 0 / 15%)); }
.technology-section .section-kicker { border-color: #ffffff30; }
.technology-section .section-kicker > span, .technology-intro > p { color: #b1b1bb; }
.technology-list { margin-top: 56px; }
.technology-list article { display: grid; grid-template-columns: 40px 1fr 1fr; gap: 24px; padding: 30px 0; border-top: 1px solid #ffffff30; align-items: start; }
.tech-number { color: #9999a5; font-size: 12px; }
.tech-label { font-size: 11px; margin: 0 0 10px; color: #aca6c9; }
.technology-list h3 { margin: 0; font-size: 20px; font-weight: 500; }
.technology-list article > p { margin: 0; font-size: 14px; color: #a6a6af; line-height: 1.9; }
.technology-section .character-lineup { margin-top: 48px; box-shadow: none; }
.character-lineup figcaption { font-size: 10px; color: #888; text-align: right; padding-top: 14px; }
.platform-site .company-layout h2 { font-size: 28px; line-height: 1.6; white-space: normal; }
.platform-site .company-intro p { font-size: 15px; line-height: 2; color: #595961; }
.platform-site .company-table { font-size: 13px; }
.platform-site .company-table div { grid-template-columns: 100px 1fr; }
.platform-site .company-table dd { font-weight: 400; }
.platform-site .contact-section h2 { font-size: 42px; font-family: var(--font-latin); font-weight: 550; line-height: 1.3; }
.platform-site .contact-section p:not(.eyebrow) { font-size: 15px; }
.platform-site a:focus-visible, .platform-site button:focus-visible { outline: 2px solid #8e8ac4; outline-offset: 5px; }
.platform-site .site-footer nav { letter-spacing: 0; }
.company-profile-page .primary-nav { display: flex; position: static; flex-direction: row; padding: 0; border: 0; }
@media (max-width: 1100px) {
  .platform-site .hero h1 { font-size: 62px; }
  .platform-site .hero-copy { white-space: normal; max-width: 48em; }
  .product-story { gap: 36px; }
  .story-copy h3 { font-size: 25px; }
  .platform-site .vision-grid, .ecosystem-intro, .technology-intro { gap: 36px; }
  .platform-site .vision-grid h2, .platform-site .section-heading, .platform-site .ecosystem-intro h2, .platform-site .technology-intro h2 { font-size: 30px; }
}
@media (max-width: 760px) {
  .products-section::before {
    height: 440px;
    background-position: center bottom;
    background-size: auto 100%;
  }
  .platform-site .hero-image { object-position: 50% center; }
  .platform-site .hero-overlay {
    background: linear-gradient(90deg, rgb(255 255 255 / 88%), rgb(255 255 255 / 58%) 50%, rgb(255 255 255 / 8%)), linear-gradient(0deg, rgb(255 255 255 / 85%), transparent 65%);
  }
  .platform-site .hero h1 { font-size: 48px; }
  .platform-site .hero-copy { font-size: 14px; max-width: 26em; }
  .platform-site .language-switch { display: flex; gap: 10px; font-size: 11px; }
  .platform-site .section { padding-block: 64px; }
  .platform-site .section-kicker { margin-bottom: 32px; }
  .platform-site .section-kicker .eyebrow, .platform-site .contact-section > .eyebrow { font-size: 17px; }
  .platform-site .section-kicker > span { font-size: 12px; }
  .platform-site .vision-grid, .ecosystem-intro, .technology-intro { grid-template-columns: 1fr; gap: 24px; }
  .platform-site .vision-grid h2, .platform-site .section-heading, .platform-site .ecosystem-intro h2, .platform-site .technology-intro h2 { font-size: 27px; }
  .product-index { margin-top: 30px; }
  .product-index a { padding: 16px 10px; align-content: start; }
  .product-index a > span:not(.index-number):not(:last-child) { grid-column: 1 / -1; }
  .product-index strong { font-size: 19px; }
  .product-index a > span:not(.index-number) { font-size: 10px; }
  .product-index a > span:last-child { display: none; }
  .product-story { grid-template-columns: 1fr; padding-block: 52px; gap: 30px; }
  .parallel-story .story-copy { order: 0; }
  .story-copy h3 { font-size: 27px; margin-block: 20px; }
  .product-art { width: 100%; max-width: 560px; justify-self: center; }
  .visual-topline { padding: 18px; font-size: 10px; }
  .product-art > figcaption { padding: 16px 18px; font-size: 9px; }
  .creation-cycle { grid-template-columns: 1fr 1fr; gap: 24px 12px; margin-top: 34px; border: 0; }
  .creation-cycle li { border-top: 1px solid #cacacf; }
  .creation-cycle h3 { font-size: 15px; }
  .technology-list article { grid-template-columns: 24px 1fr; gap: 10px 14px; }
  .technology-list article > p { grid-column: 2; }
  .technology-list h3 { font-size: 18px; }
  .platform-site .company-layout h2 { font-size: 25px; }
  .platform-site .company-table div { grid-template-columns: 1fr; }
  .platform-site .contact-section h2 { font-size: 32px; }
  .company-profile-page .primary-nav { gap: 10px; font-size: 10px; }
}
@media (max-width: 374px) {
  .platform-site .brand-name { font-size: 14px; }
  .platform-site .hero h1 { font-size: 38px; }
  .platform-site .site-header { gap: 8px; padding-inline: 12px; }
  .story-copy h3, .platform-site .vision-grid h2 { font-size: 24px; }
}