/* 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-network-gold-b2988b6ecb51.svg');
  --vi-network-paper: url('/assets/brand/fortune-network-paper-0983ac65a7cf.svg');
  --vi-symbol: url('/assets/brand/fortune-symbol-821a18ac0f13.svg');
  --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 mark and network extend 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-symbol) right 7% bottom -130px / 430px auto no-repeat,
    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 [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);
}
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-symbol) right -50px top -110px / 580px auto no-repeat,
    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-symbol) right 8% center / 390px auto no-repeat,
    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 -140px top -60px,right -250px bottom -40px;
    background-size: cover,450px auto,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: 260px auto,660px auto;
    background-position: right -40px bottom -100px,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 -140px center,right -260px bottom -30px;
    background-size: cover,330px auto,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; }
}
