/* Fortune AI: original VI artwork, varied surfaces and finite editorial motion. */
body.studio-site {
  --vi-ink: var(--navy-950, #0f2949);
  --vi-paper: var(--cream-50, #f7f5f0);
  --vi-white: #fffdf9;
  --vi-gold: #bd966b;
  --vi-teal: #5fa8a8;
  --vi-teal-ink: #28676a;
  --vi-orange: #e09855;
  --vi-mint: #edf4f1;
  --vi-warm: #f0e8dc;
  --vi-network-gold: url('/assets/brand/fortune-dot-wave-b526a6f786e1.svg');
  --vi-network-paper: url('/assets/brand/fortune-dot-wave-b526a6f786e1.svg#paper');
  --vi-ease: cubic-bezier(.2,.7,.2,1);
}

/* Brand material stays behind content and never catches a click. */
body.studio-site :is(.studio-masthead,.start-hero,.about-hero-v2,.ps-hero) {
  position: relative;
  isolation: isolate;
}
body.studio-site :is(.studio-masthead,.start-hero,.about-hero-v2)::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0 0 0 auto;
  inline-size: min(80%,1120px);
  z-index: -1;
  pointer-events: none;
  background: var(--vi-network-paper) right -90px bottom / 1080px auto no-repeat;
  opacity: .72;
  border: 0;
}
body.studio-site .studio-masthead .studio-title-group > .eyebrow,
body.studio-site .ps-hero > .ps-eyebrow,
body.studio-site .start-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.studio-site .studio-masthead .studio-title-group > .eyebrow::before,
body.studio-site .ps-hero > .ps-eyebrow::before,
body.studio-site .start-kicker::before {
  content: '';
  flex: 0 0 26px;
  block-size: 7px;
  border-block: 1px solid currentColor;
  transform: skewX(-26deg);
}

/* The person remains the opening. The dotted wave extends its lower edge. */
body.studio-home .home-interface-hero { isolation: isolate; }
body.studio-home .home-interface-hero::after {
  content: '';
  display: block;
  position: absolute;
  inset: auto 0 0 auto;
  inline-size: min(70%,1050px);
  block-size: clamp(180px,25vw,390px);
  background: var(--vi-network-gold) right bottom / 980px auto no-repeat;
  opacity: .65;
  mask-image: linear-gradient(to top,#000,transparent 98%);
  pointer-events: none;
  z-index: 1;
}
body.studio-home .home-interface-layout { position: relative; z-index: 2; }
body.studio-home .home-interface-copy > .eyebrow { color: #dfc39f; }
body.studio-home .home-trust-strip {
  background: var(--vi-white);
  border-block: 1px solid rgba(25,59,104,.08);
}

/* Keep the existing synchronized story; phase color follows its real state. */
body.studio-home .op-flow {
  --vi-phase: var(--vi-orange);
  --cream-50: var(--vi-mint);
  background: var(--vi-network-paper) right -260px top -90px / 1080px auto no-repeat,
    var(--vi-mint);
  position: relative;
  isolation: isolate;
}
body.studio-home .op-flow[data-flow-stage='2'] { --vi-phase: var(--vi-gold); }
body.studio-home .op-flow[data-flow-stage='3'] { --vi-phase: var(--vi-teal); }
body.studio-home .op-flow-heading .eyebrow { color: var(--vi-teal-ink); }
body.studio-home .op-flow-scenes { padding: 6px 4px 12px; }
body.studio-home [data-flow-scenario] [data-flow-select] {
  border: 1px solid transparent;
  border-radius: 8px;
  min-height: 44px;
  padding: 12px 22px;
  color: var(--vi-ink);
}
body.studio-home [data-flow-scenario] [data-flow-select][aria-pressed='true'] {
  background: var(--vi-ink);
  border-color: var(--vi-ink);
  color: var(--vi-white);
}

/* Industry cards share image, title, explanation and link rows. */
body.studio-site .vertical-featured { align-items: stretch; }
body.studio-site .vertical-featured > .vertical-featured-card {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin-block-start: 0;
  padding-block-end: 44px;
  transform: none;
}
body.studio-site .vertical-featured-media { min-height: 0; }
body.studio-site .vertical-featured-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
  padding: 22px 0 0;
}
body.studio-site .vertical-featured-copy h3 { margin: 0; }
body.studio-site .vertical-featured-copy > span { margin-top: auto; }
/* New deck and story sections use the same page edges as the product hero. */
body.studio-site.ps-site .ps-main > :is(.dc-applications,.dc-capability,.dc-workflow-detail,.dc-platform,.ps-story-collection,.ps-application-story,.ps-story-related,.ps-story-result,.ps-case-chapters,.ps-case-photo,.ps-case-source,.ps-system,.deck-photos,.industry-buyer-questions) {
  width: calc(100% - 2 * var(--ic-gutter));
  max-width: calc(var(--ic-page) - 2 * var(--ic-gutter));
  margin-inline: auto;
}
body.studio-site.ps-site .ps-main > .industry-buyer-questions { padding-inline: 0; }
body.studio-site.ps-site .ps-main > .industry-buyer-questions > .container {
  width: 100%;
  max-width: none;
  padding-inline: 0;
}
body.studio-site.ps-site .dc-capability > .deck-photos {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}
@supports (grid-template-rows:subgrid) {
  body.studio-site .vertical-featured { row-gap: 0; }
  body.studio-site .vertical-featured > .vertical-featured-card {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: subgrid;
    grid-row: span 4;
  }
  body.studio-site .vertical-featured-copy {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    justify-items: start;
  }
}

/* Guide cards share row tracks instead of staggered offsets. */
body.studio-site .library-guide-list > .library-guide-card { margin-block-start: 0; }
@supports (grid-template-rows:subgrid) {
  body.studio-site .library-guide-list { row-gap: 0; }
  body.studio-site .library-guide-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 5;
    padding-block-end: 40px;
  }
  body.studio-site .library-guide-primary {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
  }
  body.studio-site .library-guide-card > p { margin-block: 14px 0; }
  body.studio-site .library-guide-card > .library-card-link { margin-block-start: 16px; }
}

/* Photographs and whitespace group the resource links without table rules. */
body.studio-site .library-content > .library-industry-section { border: 0; }
body.studio-site .library-industry-links {
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 40px 56px;
  border: 0;
}
body.studio-site .library-industry-link {
  grid-template-columns: clamp(88px,11vw,144px) minmax(0,1fr) 18px;
  align-items: start;
  gap: 20px;
  padding: 0;
  border: 0;
}
body.studio-site .library-industry-media {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--vi-mint);
}
body.studio-site .library-industry-media img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
body.studio-site .library-industry-copy { min-inline-size: 0; }
body.studio-site .library-industry-link strong { font-size: 20px; }
body.studio-site .library-industry-link small { margin-top: 8px; font-size: 15px; }
body.studio-site .library-industry-link:focus-visible strong { color: var(--vi-teal-ink); }
@media (hover:hover) and (pointer:fine) {
  body.studio-site .library-industry-link:hover strong { color: var(--vi-teal-ink); }
}
@media (max-width:900px) {
  body.studio-site .library-industry-links { grid-template-columns: 1fr; gap: 32px; }
  body.studio-site .library-industry-link { grid-template-columns: 120px minmax(0,1fr) 18px; }
}
@media (max-width:600px) {
  body.studio-site.ps-site .ps-nav > div {
    flex-wrap: wrap;
    overflow: visible;
    gap: 0 20px;
  }
  body.studio-site .library-industry-link { grid-template-columns: 88px minmax(0,1fr) 18px; gap: 12px; }
  body.studio-site .library-industry-link strong { font-size: 18px; }
}
body.studio-home .op-stage-tabs { gap: clamp(10px,2.4vw,34px); }
body.studio-home .op-stage-tabs [role='tab'] {
  padding: 18px 0 18px 16px;
  border: 0;
  border-top: 2px solid rgba(25,59,104,.14);
  text-align: left;
  min-height: 64px;
}
body.studio-home .op-stage-tabs [aria-selected='true'] {
  border-top-color: var(--vi-phase);
  background: linear-gradient(90deg,rgba(255,255,255,.8),rgba(255,255,255,0));
  color: var(--vi-ink);
}
body.studio-home .op-stage-tabs [aria-selected='true'] .op-stage-number { color: var(--vi-teal-ink); }
body.studio-home .op-stage-progress { background: var(--vi-phase); }
body.studio-home .op-story-copy h3 { padding-top: 22px; position: relative; }
body.studio-home .op-story-copy h3::before {
  content: '';
  inline-size: 44px;
  block-size: 3px;
  background: var(--vi-phase);
  position: absolute;
  inset: 0 auto auto 0;
}

/* Product overviews retain their photograph; child pages receive a branded opening. */
body.studio-site .ps-nav { background: var(--vi-white); border-color: rgba(25,59,104,.1); }
body.studio-site .ps-nav a[aria-current] { border-color: var(--vi-teal); }
body.studio-site .ps-main > .industry-detail-hero {
  background-color: var(--vi-paper);
  border-bottom: 1px solid rgba(25,59,104,.08);
}
body.studio-site .studio-section.studio-masthead,
body.studio-site .ps-main > .industry-detail-hero.studio-masthead {
  position: relative;
  isolation: isolate;
}
body.studio-site .studio-section.studio-masthead::before {
  display: block;
}
body.studio-site .ps-main > .industry-detail-hero .studio-hero-visual {
  border-radius: 22px 22px 22px 5px;
  box-shadow: 0 16px 44px -32px rgba(15,41,73,.35);
}
body.studio-site .ps-hero {
  width: 100%;
  margin: 0 auto 42px;
  padding: clamp(44px,5vw,76px) max(4vw,calc((100% - 1200px)/2));
  background: var(--vi-ink);
  color: var(--vi-white);
  border-bottom: 1px solid rgba(189,150,107,.3);
}
body.studio-site .ps-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg,var(--vi-ink) 22%,transparent 90%),
    var(--vi-network-gold) right -160px bottom -60px / 1080px auto no-repeat;
  opacity: .58;
}
body.studio-site .ps-hero :is(h1,.ps-breadcrumb,.ps-breadcrumb a) { color: var(--vi-white); }
body.studio-site .ps-hero .ps-eyebrow { color: #dfc39f; }
body.studio-site .ps-hero .ps-lead { color: #d4dfe5; }
body.studio-site .ps-hero .ps-breadcrumb { opacity: .82; }
body.studio-site .ps-showcase { margin-top: 42px; }
body.studio-site .ps-slides { border: 1px solid rgba(25,59,104,.1); background: var(--vi-white); }
body.studio-site .ps-slides figcaption {
  background: var(--vi-white);
  border-top: 3px solid var(--vi-teal);
}
body.studio-site .ps-slides figcaption a { color: var(--vi-teal-ink); }
body.studio-site .ps-dots [aria-pressed='true'] span { background: var(--vi-teal-ink); }
body.studio-site .ps-carousel-controls button { background: var(--vi-white); }
body.studio-site .ps-section-heading > .ps-eyebrow { color: var(--vi-teal-ink); }
body.studio-site .ps-app { border-color: rgba(25,59,104,.15); }
body.studio-site .ps-app .ps-eyebrow { color: var(--vi-teal-ink); }
body.studio-site .ps-app h3 > svg { color: var(--vi-teal-ink); }
body.studio-site .ps-app img { border-radius: 18px 18px 18px 4px; }
body.studio-site .ps-feature-image img { border: 1px solid rgba(25,59,104,.08); }
body.studio-site .ps-evidence-pair { border: 0; gap: clamp(28px,5vw,72px); }
body.studio-site .ps-evidence-pair > article { border-top: 2px solid var(--vi-gold); padding-top: 26px; }
body.studio-site .ps-evidence-pair > article + article { border-color: var(--vi-teal); }
body.studio-site .ps-evidence-pair > article + article .ps-mini-icon { color: var(--vi-teal-ink); background: #deece6; }
body.studio-site .ps-decision {
  background: var(--vi-mint);
  border-radius: 22px 22px 22px 4px;
  border: 1px solid rgba(95,168,168,.2);
}
body.studio-site .ps-decision .ps-eyebrow { color: var(--vi-teal-ink); }
body.studio-site .ps-stages li { border-top-color: var(--vi-orange); }
body.studio-site .ps-stages li:nth-child(2) { border-top-color: var(--vi-gold); }
body.studio-site .ps-stages li:nth-child(3) { border-top-color: var(--vi-teal); }
body.studio-site .ps-case-chapters > article { border-color: rgba(95,168,168,.4); }
body.studio-site .ps-story-teaser { padding-block: clamp(60px,7vw,100px); }
body.studio-site .ps-story-teaser .ps-eyebrow { color: var(--vi-teal-ink); }
body.studio-site .ps-text-link { color: var(--vi-teal-ink); }

/* A separate cinema gives the product demonstration a clear place in the page. */
body.studio-site .buyer-workflow-demo.studio-section {
  background: var(--vi-ink);
  color: var(--vi-white);
  position: relative;
  isolation: isolate;
  padding-block: clamp(56px,7vw,96px);
}
body.studio-site .buyer-workflow-demo::before {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0 0 auto auto;
  width: min(70%,1000px);
  height: 360px;
  background: var(--vi-network-gold) right -100px top -100px / 1000px auto no-repeat;
  opacity: .48;
  z-index: -1;
}
body.studio-site .buyer-workflow-demo .buyer-demo-heading h2 { color: var(--vi-white); }
body.studio-site .buyer-workflow-demo .buyer-demo-heading > p:not(.eyebrow) { color: #cbd9df; }
body.studio-site .buyer-workflow-demo .buyer-demo-heading > .eyebrow { color: #dfc39f; }
body.studio-site .buyer-workflow-demo .buyer-demo-conversation > figure {
  border: 1px solid rgba(189,150,107,.42);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 65px -38px rgba(0,0,0,.7);
}
body.studio-site .buyer-workflow-demo > .container > details > summary { color: var(--vi-white); }
body.studio-site .buyer-workflow-demo > .container > details { border-color: rgba(189,150,107,.35); }

/* Shared closing field. The old placeholder dot grid becomes the original VI mesh. */
body.studio-site :is(.studio-cta-inner,.cta-simple,.start-final-grid,.ps-cta,.site-footer) {
  position: relative;
  isolation: isolate;
}
body.studio-site :is(.studio-cta-inner,.cta-simple,.start-final-grid,.ps-cta)::before {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  mask-image: none;
  background: linear-gradient(90deg,var(--vi-ink) 16%,transparent 100%),
    var(--vi-network-gold) right -50px bottom -90px / 1040px auto no-repeat;
  opacity: .64;
}
body.studio-site .site-footer {
  background: var(--vi-ink);
  border-top: 1px solid rgba(189,150,107,.28);
}
body.studio-site .site-footer::after {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: auto 0 0 auto;
  width: min(100%,1050px);
  height: 310px;
  z-index: -1;
  background: var(--vi-network-gold) right bottom -110px / 1000px auto no-repeat;
  opacity: .4;
}
body.studio-home .home-deployment-cta { background: var(--vi-paper); }
body.studio-home .home-deployment-cta .cta-simple { border-radius: 22px 22px 22px 5px; }
body.studio-site .ps-cta { background: var(--vi-ink); }
body.studio-site .industry-faq-question > summary,
body.studio-site .faq-question > summary { border-radius: 6px; }
body.studio-site .industry-faq-question[open] > summary { color: var(--vi-teal-ink); }
body.studio-site :is(.button,.ps-button,.nav-cta):focus-visible { outline-color: var(--vi-teal-ink); }
body.studio-site :is(.home-interface-hero,.ps-cta,.cta-simple,.start-final-grid,.site-nav) :is(.button,.ps-button,.nav-cta):focus-visible { outline-color: var(--vi-teal); }

/* Reused progressive enhancement: content is readable before JS and after interruption. */
html.vi-enhanced body.studio-site .reveal {
  opacity: 1;
  transform: none;
  clip-path: none;
  transition: none;
}
@media (prefers-reduced-motion: no-preference) {
  body.studio-site :is(.button,.ps-button,.ps-nav a,[data-flow-select],[role='tab'],.ps-text-link) {
    transition: color 180ms ease,background-color 180ms ease,border-color 180ms ease,transform 180ms ease;
  }
  body.studio-site .vi-material-enter::before,
  body.studio-home .home-interface-hero.vi-material-enter::after {
    animation: vi-material-unfold 1100ms var(--vi-ease) both;
  }
  body.studio-home .home-interface-hero.vi-material-enter::before { animation: none; }
  @media (hover:hover) and (pointer:fine) {
    body.studio-site :is(.button,.ps-button):hover { transform: translateY(-2px); }
    body.studio-site .ps-app a:hover h3 { color: var(--vi-teal-ink); }
    body.studio-site .ps-app a:hover img { transform: translateY(-3px); }
    body.studio-site .ps-app img { transition: transform 360ms var(--vi-ease); }
    body.studio-site .ps-nav a:hover { color: var(--vi-teal-ink); }
    body.studio-site .ps-text-link:hover { text-decoration-color: var(--vi-gold); }
  }
}
@keyframes vi-material-unfold {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0); }
}

@media (max-width:900px) {
  body.studio-site .ps-hero::before {
    background-position: center,right -250px bottom -40px;
    background-size: cover,850px auto;
    opacity: .36;
  }
  body.studio-site :is(.studio-masthead,.start-hero,.about-hero-v2)::before {
    inline-size: 90%; background-position: right -240px top; background-size: 900px auto; opacity: .58;
  }
  body.studio-site .buyer-workflow-demo::before { opacity: .3; }
}
@media (max-width:600px) {
  body.studio-home .home-interface-hero::after {
    inline-size: 100%; block-size: 150px;
    background-size: 660px auto;
    background-position: right -140px bottom;
    opacity: .4;
  }
  body.studio-home .op-flow { background-position: right -310px top; background-size: 700px auto; }
  body.studio-home [data-flow-scenario] [data-flow-select] { padding-inline: 14px; }
  body.studio-home .op-stage-tabs [role='tab'] { padding: 14px 8px 14px 10px; min-height: 58px; }
  body.studio-site .ps-hero { margin-bottom: 28px; padding-block: 34px 42px; }
  body.studio-site .ps-hero::before { opacity: .24; }
  body.studio-site .ps-showcase { margin-top: 26px; }
  body.studio-site .ps-main > .industry-detail-hero .studio-hero-visual { border-radius: 14px 14px 14px 4px; }
  body.studio-site .ps-slides figcaption strong { font-size: 20px; }
  body.studio-site .buyer-workflow-demo .buyer-demo-conversation > figure { border-radius: 13px; }
  body.studio-site .ps-decision { border-radius: 15px 15px 15px 4px; }
  body.studio-site :is(.studio-cta-inner,.cta-simple,.start-final-grid,.ps-cta)::before {
    background-position: center,right -260px bottom -30px;
    background-size: cover,780px auto;
    opacity: .44;
  }
  body.studio-site .site-footer::after { opacity: .22; }
  body.studio-site :is(.studio-masthead,.start-hero,.about-hero-v2)::before {
    inline-size: 100%; background-position: right -260px top; background-size: 700px auto; opacity: .42;
  }
}
@media (prefers-reduced-motion:reduce) {
  body.studio-site .vi-material-enter::before,
  body.studio-home .home-interface-hero.vi-material-enter::after { animation: none; }
  body.studio-site :is(.button,.ps-button,.ps-app img,.ps-nav a,[data-flow-select],[role='tab'],.ps-text-link) { transition: none; }
}
@media (forced-colors:active) {
  body.studio-site :is(.studio-masthead,.start-hero,.about-hero-v2,.ps-hero,.buyer-workflow-demo,.ps-cta,.site-footer)::before,
  body.studio-site .site-footer::after,
  body.studio-home .home-interface-hero::after { content: none; }
}
/* Headings and section labels share the regular brand face. */
body.studio-site { --font-mono: 'Noto Sans', 'Noto Sans JP', system-ui, sans-serif; }
body.studio-site :is(h1,h2,h3,h4,h5,h6,[class*="eyebrow"],.ic-proof-label,.ic-question-label,.ic-toolbar>span,.ps-stage-num) {
  font-family: 'Noto Sans', 'Noto Sans JP', system-ui, sans-serif !important;
}
body.studio-site [class*="eyebrow"] { letter-spacing: .035em; }

/* Related FAQ destinations have the same reading and interaction hierarchy. */
body.studio-site.ps-site .industry-buyer-questions header > .resource-inline-link {
  font-size: 18px; line-height: 1.55; font-weight: 600; margin-block-start: 12px;
}

/* Context photos add role and use, without another card or table surface. */
body.studio-site .deck-photos { width: min(1200px,92%); margin: 0 auto; padding-block: clamp(32px,5vw,64px); }
body.studio-site .deck-photos h2 { font-size: clamp(26px,3vw,38px); line-height: 1.2; margin: 0 0 28px; color: #193b68; }
body.studio-site .deck-photo-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 36px; align-items: start; }
body.studio-site .deck-photo-grid figure { min-width: 0; margin: 0; }
body.studio-site .deck-photo-grid img { display: block; width: 100%; height: auto; border-radius: 8px; }
body.studio-site .deck-photo-grid figcaption { font: 400 15px/1.6 'Noto Sans','Noto Sans JP',sans-serif; color: #536574; margin-top: 12px; padding: 0; }
body.studio-site .deck-photos-single .deck-photo-grid { grid-template-columns: minmax(0,1fr); max-width: 880px; }
@media(max-width:700px) { body.studio-site .deck-photo-grid { grid-template-columns: 1fr; gap: 28px; } body.studio-site .deck-photos h2 { font-size: 27px; } }