/* The shared neutral identity. Layout-specific rules stay in their components. */
:root {
  --paper: #08090b;
  --forest: #f5f5f7;
  --muted: #a7a7ae;
  --line: #303136;
  --soft: #121316;
  --white: #191a1e;
  --accent: #eeeeef;
  --accent-hover: #fff;
  --orange: #bfc1c7;
  --ink: #111215;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: var(--sans);
}
html { scroll-padding-top: 96px; }
body, .experience-page { background: var(--paper); }
em { font-family: var(--sans); font-style: normal; font-weight: inherit; }
h1, h2, h3 { font-weight: 600; }
h1 em, h2 em, .experience-page h2 em { color: #9b9ca4; }
button { cursor: pointer; }
.wrap { width: min(1280px, calc(100% - 112px)); }
.site-header.wrap { width: 100%; }
.site-header, .experience-page .site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  width: 100%;
  min-height: 76px;
  padding: 12px max(40px, calc((100vw - 1280px) / 2));
  gap: 32px;
  flex-wrap: nowrap;
  border-bottom: 1px solid #ffffff12;
  background: #08090be8;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.brand-lockup, .site-header .brand-lockup { width: 150px; height: 48px; object-fit: contain; }
.main-nav, .experience-page .main-nav { gap: 28px; font-size: 12px; font-weight: 400; color: #c9c9ce; width: auto; order: 0; padding: 0; border: 0; }
.studio-menu-toggle { display: none; }
.site-header .studio-navigation[hidden] { display: none; }
.site-header .studio-navigation {
  display: block;
  position: absolute; top: 100%; left: 0; right: 0; padding: 20px 32px 30px;
  background: #111215; border-bottom: 1px solid #44454f;
  max-height: calc(100dvh - 76px); overflow-y: auto;
}
.studio-navigation a { display: flex; align-items: center; justify-content: space-between; min-height: 54px; border-bottom: 1px solid #303137; font-size: 18px; }
.studio-navigation a span { color: #8e8f9a; font-size: 15px; }
.header-cta, .experience-page .header-cta {
  gap: 12px; min-height: 36px; padding: 7px 15px;
  border: 1px solid #ffffff32; border-radius: 24px; background: #ffffff09; color: var(--forest); font-size: 12px;
}
.header-cta:hover, .experience-page .header-cta:hover { color: var(--ink); background: #f5f5f7; }
.button, .experience-page .button { border-radius: 999px; min-height: 48px; padding: 13px 23px; gap: 20px; font-size: 14px; font-weight: 500; box-shadow: none; }
.button-dark, .experience-page .button-dark { background: #f5f5f7; color: #111215; border: 1px solid #f5f5f7; }
.button-dark:hover, .experience-page .button-dark:hover { background: #fff; transform: translateY(-1px); }
.button-outline, .experience-page .button-outline { border: 1px solid #62636b; background: transparent; color: #eeeef0; border-radius: 999px; }
.text-button { color: #dedee3; font-size: 14px; }
.eyebrow { text-transform: none; letter-spacing: .035em; font-size: 12px; line-height: 1.6; font-weight: 500; color: #b1b2ba; }
.section-label { margin-bottom: 20px; }
.text-link { border-color: #62636b; font-size: 14px; }
.section-space, .experience-page .section-space { padding-block: 120px; }
.experience-page .cinema-hero {
  position: relative; isolation: isolate; min-height: 790px; height: calc(100svh - 76px); max-height: 1120px;
  overflow: clip; display: flex; flex-direction: column; align-items: center; justify-content: space-between; background: #0b0b0d;
}
.cinema-image { position: absolute; inset: 0; z-index: -3; }
.cinema-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; transform: scale(1.035); }
.cinema-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, #08090bea 0%, #08090b99 28%, #08090b16 64%, #08090bda 100%); }
.cinema-copy { text-align: center; padding-top: clamp(45px, 6vh, 88px); }
.cinema-copy .eyebrow { justify-content: center; margin-inline: auto; font-size: 12px; gap: 13px; color: #d4d4d9; }
.experience-page .cinema-copy h1 { font-size: clamp(76px, 7.5vw, 112px); font-weight: 650; line-height: 1.025; letter-spacing: -.055em; max-width: none; margin: 25px auto 20px; color: #fafafb; }
.cinema-copy h1 span { color: #d4d4da; }
.cinema-description { margin: 0 auto; color: #dedee3; font-size: 19px; line-height: 1.5; max-width: 560px; text-shadow: 0 2px 15px #0007; }
.cinema-actions { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 25px; }
.cinema-actions .text-button { color: #f5f5f7; }
.cinema-bottom { display: flex; justify-content: space-between; align-items: end; padding-bottom: 92px; gap: 30px; }
.cinema-bottom > p { font-size: 13px; line-height: 1.6; font-weight: 500; }
.cinema-bottom > p span { color: #a7a7ae; font-weight: 400; }
.cinema-bottom .cinema-launch { text-align: right; font-size: 11px; font-weight: 400; color: #c1c1c8; }
.cinema-scroll { display: inline-flex; align-items: center; gap: 12px; color: #ceced5; font-size: 12px; }
.cinema-scroll span { display: grid; place-items: center; border: 1px solid #ffffff40; border-radius: 50%; width: 34px; height: 34px; }
.opening-statement { padding-block: 160px 140px; text-align: center; }
.opening-statement > .eyebrow { justify-content: center; margin: 0 auto 35px; }
.opening-statement h2 { font-size: clamp(39px, 4.8vw, 70px); line-height: 1.16; letter-spacing: -.05em; font-weight: 600; }
.opening-statement h2 span { color: #8f9099; }
.statement-note { font-size: 18px; line-height: 1.65; max-width: 600px; color: #a7a7b0; margin: 35px auto 0; }
.statement-details { display: flex; align-items: center; justify-content: center; gap: 38px; margin-top: 48px; color: #ceced4; font-size: 13px; }
.statement-details span + span { border-left: 1px solid #3c3d43; padding-left: 38px; }
.experience-page .journey-section { border-top: 1px solid #27282d; }
.experience-heading h2, .pricing-heading h2, .experience-page .technology-heading h2, .experience-page .report-copy h2 { font-size: clamp(42px, 4.5vw, 64px); letter-spacing: -.05em; font-weight: 600; }
.experience-heading { margin-bottom: 45px; }
.experience-heading > p { font-size: 16px; max-width: 350px; }
.journey-tabs { display: flex; gap: 7px; width: fit-content; padding: 6px; border: 1px solid #383940; border-radius: 999px; margin-bottom: 28px; background: #111215; }
.journey-tabs button { border: 0; border-radius: 999px; padding: 13px 25px; font-size: 14px; min-height: 46px; background: transparent; color: #bdbdc5; }
.journey-tabs button > span, .journey-tabs button b { display: none; }
.journey-tabs button[aria-pressed=true] { color: #16171b; background: #eeeeef; }
.journey-result { border: 0; border-radius: 24px; padding: 50px; background: #16171b; gap: 75px; }
.journey-result h3 { font-size: 38px; font-weight: 600; }
.journey-result > div > p:not(.eyebrow), .journey-result li p { color: #a7a7b0; }
.journey-result li > span { border: 0; background: #28292f; color: #d6d6dc; width: 36px; height: 36px; }
.journey-result strong { font-size: 16px; }
.explore-chapter { padding: 65px 0 0; }
.explore-heading { text-align: center; margin-bottom: 50px; }
.explore-heading .eyebrow { justify-content: center; margin: 0 auto 22px; }
.explore-heading h2 { font-size: clamp(46px, 5.5vw, 80px); line-height: 1.05; letter-spacing: -.057em; }
.explore-heading h2 span { color: #999aa4; }
.explore-heading > p:last-child { font-size: 17px; line-height: 1.6; color: #a7a7b0; margin: 26px auto 0; }
.home-explorer { --hx-mint: #e2e3e8; --hx-white: #f5f5f7; --hx-muted: #a7a7ae; border: 1px solid #303137; background: #111215; border-radius: 24px; box-shadow: none; }
.hx-header { padding: 25px 30px 0; }
.hx-title { color: #bfbfc8; }
.hx-stage { height: clamp(350px, 43vw, 600px); background: radial-gradient(ellipse at 50% 75%, #ffffff0e, transparent 70%); }
.hx-stage:before { display: none; }
.hx-bottom { background: #191a1e; }
.hx-devices { padding-inline: 24px; }
.hx-device { min-height: 66px; font-size: 14px; }
.hx-detail { padding: 30px; min-height: 145px; }
.hx-detail h3 { max-width: none; font-size: 25px; }
.hx-detail p { max-width: 850px; font-size: 15px; }
.hx-detail-number { font-family: var(--sans); font-style: normal; font-size: 13px; }
.experience-page .technology-section { background: var(--paper); }
.technology-section .section-space { padding-top: 80px; }
.compact-categories .category-card { border-color: #33343b; }
.experience-page .brand-strip { border-radius: 0; background: transparent; padding-inline: 0; border: 0; border-top: 1px solid #303137; }
.brand-icon { filter: grayscale(1); }
.experience-page .report-section { padding-top: 110px; padding-bottom: 130px; gap: 95px; }
.experience-page .report-preview { background: linear-gradient(135deg, #25262c, #16171c); border: 1px solid #484950; border-radius: 24px; transform: none; box-shadow: 0 35px 90px #0005; padding: 40px; }
.report-preview > h3 { font-size: 43px; font-weight: 600; }
.report-preview > h3 em { color: #b8b9c1; }
.report-monogram { font-family: var(--sans); }
.passport-device > p { color: #b3b4bd; }
.device-outcome { color: #d9d9df; background: #ffffff08; border-color: #55565f; }
.experience-page .pricing-section { background: #101114; }
.experience-page .price-card { border: 1px solid #393a42; background: #17181c; border-radius: 24px; padding: 36px 30px; }
.experience-page .price-card-expanded { border-color: #8a8b95; background: #22232a; box-shadow: none; }
.experience-page .price-label { font-size: 23px; }
.price-amount, .price-amount-custom { font-family: var(--sans); }
.experience-page .price-card .button { font-size: 13px; padding-inline: 18px; gap: 10px; }
.price-disclosure { max-width: 100%; }
.experience-page .scope-estimator { background: #191a1e; }
.experience-page .faq-section { background: #101114; }
.experience-page .lead-form { background: #15161a; border: 1px solid #3d3e46; border-radius: 24px; padding: 35px; }
.lead-form input, .lead-form select, .lead-form textarea { background: #0c0d10; border-color: #595a64; border-radius: 10px; }
.lead-form label { color: #dddde4; }
.consent-label input { accent-color: #d8d8df; }
.experience-page .inquiry-heading h2 { font-size: clamp(42px, 4.5vw, 64px); }
.information h1 { font-size: clamp(45px, 5.3vw, 76px); font-weight: 600; }
.information h1 em { color: #9899a3; }
.information-lead { color: #b2b3bc; }
.guide-cta, .editorial-callout { background: #191a1f; border-color: #41424b; }
.guide-card { background: #141519; border-color: #3c3d45; }
.guide-card h3 { font-weight: 600; }
.site-footer { background: #08090b; border-color: #2c2d33; }
.footer-top { padding-block: 50px; }
.footer-brand .brand-lockup { width: 165px; height: 53px; }
.footer-top p, .footer-bottom, .guide-footer { color: #a3a4ad; }
.chat-launcher { background: #ededf0; color: #121316; border-color: #eeeef0; }
.chat-panel { background: #15161a; border-color: #44454f; color: #f5f5f7; }
.chat-head { background: #1b1c21; border-color: #383941; }
.chat-brand h2 { font-weight: 600; }
/* Keep the independent conversation layout intact when changing the brand skin. */
@media (max-width: 1100px) {
  .site-header, .experience-page .site-header { padding-inline: 32px; gap: 24px; }
  .main-nav, .experience-page .main-nav { gap: 20px; }
  .journey-result { gap: 40px; padding: 36px; }
  .experience-page .report-section { gap: 45px; }
}
@media (max-width: 850px) {
  .wrap { width: calc(100% - 64px); }
  .site-header .main-nav { display: none; }
  .studio-menu-toggle { display: flex; width: 36px; height: 36px; padding: 10px 8px; border: 0; border-radius: 50%; background: transparent; flex-direction: column; justify-content: center; gap: 5px; flex-shrink: 0; }
  .studio-menu-toggle span { display: block; width: 20px; height: 1px; background: #dddde5; }
  .studio-menu-toggle[aria-expanded=true] span:first-child { transform: translateY(3px) rotate(45deg); }
  .studio-menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .site-header .header-cta { margin-left: auto; }
  .experience-page .cinema-hero { min-height: 780px; }
  .experience-page .cinema-copy h1 { font-size: 84px; }
  .cinema-copy { padding-top: 75px; }
  .opening-statement { padding-block: 110px; }
  .experience-page .report-section { padding-block: 90px; }
  .experience-page .section-space, .section-space { padding-block: 90px; }
  .journey-result { gap: 32px; }
  .hx-stage { height: 460px; }
  .hx-device { flex-direction: row; font-size: 13px; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 82px; }
  .wrap { width: calc(100% - 40px); }
  .site-header, .experience-page .site-header { min-height: 68px; padding: 10px 16px; gap: 8px; }
  .site-header .brand-lockup { width: 118px; height: 40px; }
  .header-cta, .experience-page .header-cta { padding: 7px 12px; font-size: 11px; gap: 8px; }
  .experience-page .cinema-hero { height: calc(100svh - 68px); min-height: 720px; max-height: 900px; }
  .cinema-image img { object-position: 58% center; transform: none; }
  .cinema-shade { background: linear-gradient(180deg, #08090bef, #08090b75 43%, #08090b0d 66%, #08090bef); }
  .cinema-copy { padding-top: 54px; }
  .cinema-copy .eyebrow { font-size: 10px; letter-spacing: .025em; gap: 7px; }
  .experience-page .cinema-copy h1 { font-size: clamp(47px, 12.5vw, 74px); letter-spacing: -.06em; line-height: 1.07; margin: 26px auto 22px; }
  .cinema-description { font-size: 16px; line-height: 1.55; max-width: 310px; }
  .desktop-break { display: none; }
  .cinema-actions { gap: 20px; flex-direction: column; margin-top: 26px; }
  .cinema-actions .button { font-size: 13px; min-height: 46px; }
  .cinema-actions .text-button { font-size: 13px; }
  .cinema-bottom { gap: 15px; padding-bottom: 84px; }
  .cinema-bottom > p { font-size: 11px; }
  .cinema-bottom .cinema-launch { font-size: 10px; max-width: 170px; }
  .cinema-scroll { display: none; }
  .opening-statement { text-align: left; padding-block: 90px; }
  .opening-statement > .eyebrow { justify-content: flex-start; font-size: 11px; margin-bottom: 27px; max-width: 260px; margin-left: 0; }
  .opening-statement h2 { font-size: clamp(34px, 8.7vw, 48px); line-height: 1.17; }
  .statement-note { font-size: 16px; margin-top: 27px; }
  .statement-details { flex-wrap: wrap; justify-content: flex-start; gap: 13px; margin-top: 30px; font-size: 12px; }
  .statement-details span + span { border: 0; padding: 0; }
  .statement-details span { padding: 8px 0; border-bottom: 1px solid #4a4b54; }
  .experience-page .section-space, .section-space { padding-block: 76px; }
  .experience-heading h2, .pricing-heading h2, .experience-page .pricing-heading h2, .experience-page .technology-heading h2, .experience-page .report-copy h2, .experience-page .inquiry-heading h2 { font-size: 40px; line-height: 1.1; }
  .experience-heading { margin-bottom: 30px; }
  .experience-heading > p { font-size: 15px; }
  .journey-tabs { width: 100%; gap: 2px; padding: 4px; }
  .journey-tabs button { flex: 1; justify-content: center; padding: 10px 5px; font-size: 12px; min-height: 43px; white-space: nowrap; }
  .journey-result { padding: 28px 24px; border-radius: 20px; }
  .journey-result h3 { font-size: 30px; }
  .journey-result strong { font-size: 15px; }
  .explore-chapter { padding-top: 25px; }
  .explore-heading { text-align: left; margin-bottom: 35px; }
  .explore-heading .eyebrow { justify-content: flex-start; }
  .explore-heading h2 { font-size: 43px; }
  .explore-heading > p:last-child { font-size: 15px; }
  .home-explorer { border-radius: 20px; }
  .hx-stage { height: 340px; }
  .hx-header { padding: 18px 14px 0; }
  .hx-device { flex-direction: column; font-size: 12px; min-height: 64px; }
  .hx-devices { padding-inline: 7px; }
  .hx-detail { padding: 23px 19px; min-height: 0; }
  .hx-detail h3 { font-size: 22px; }
  .hx-detail p { font-size: 14px; }
  .experience-page .report-section { padding-block: 76px; }
  .experience-page .report-preview { padding: 27px 23px; margin-top: 32px; }
  .report-preview > h3 { font-size: 38px; }
  .experience-page .price-card { padding: 32px 25px; }
  .experience-page .lead-form { padding: 25px 20px; }
  .experience-page .brand-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .information { padding-block: 55px 75px; }
  .information h1 { font-size: 44px; }
  .information-lead { font-size: 17px; }
  .guide-cta { padding: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
  *, *:before, *:after { animation-duration: 0s !important; transition-duration: 0s !important; }
  .cinema-image img { transform: none !important; }
}
@media print {
  body, .experience-page { background: white; color: #111; }
  .cinema-hero, .opening-statement, .explore-chapter, .site-header { display: none !important; }
  .information h1, .information h1 em, .information-lead { color: #111; }
}