.spro-case2{--sp-black: #17171C;          
  --sp-ink-2: #24252C;          
  --sp-graphite: #3A3B44;       
  --sp-dark-gray: #5E6172;      
  --sp-muted: #747684;          
  --sp-gray-400: #B9BAC4;       
  --sp-gray-350: #BABBC1;       
  --sp-gray: #D1D2D6;           
  --sp-line-soft: #E3E4E8;      
  --sp-light: #F9F9FA;          
  --sp-white: #FFFFFF;          

  --sp-pink-50: #FFF0F2;
  --sp-pink-100: #FFE2E8;
  --sp-pink-200: #FFCAD6;
  --sp-pink-300: #FF9FB4;
  --sp-pink-400: #FF698D;
  --sp-pink-500: #FF1E5A;       
  --sp-pink-600: #ED1156;
  --sp-pink-700: #C80849;
  --sp-pink-800: #A80944;
  --sp-pink-900: #8F0C40;
  --sp-red: var(--sp-pink-500);

  
  --sp-font-display: "Archivo", sans-serif;
  --sp-font-body: "Inter", -apple-system, system-ui, "Segoe UI", sans-serif;

  
  --sp-fs-display: clamp(44px, 5.85vw, 84px);   
  --sp-fs-h2: clamp(34px, 4.4vw, 64px);         
  --sp-fs-h3: 48px;                              
  --sp-fs-stat: 72px;                            
  --sp-fs-h4: 30px;                              
  --sp-fs-card: 28px;                            
  --sp-fs-form-title: 26px;
  --sp-fs-row: 24px;                             
  --sp-fs-lg: 20px;                              
  --sp-fs-body: 16px;
  --sp-fs-sm: 14px;
  --sp-fs-xs: 12px;
  --sp-tracking-tight: -0.01em;                  

  
  --sp-max: 1440px;
  --sp-gutter: clamp(16px, 5.5vw, 80px);
  --sp-section-y: 100px;
  --sp-radius: 0;                                
  --sp-radius-round: 50%;                        
  --sp-ease: cubic-bezier(.2, .7, .2, 1);}
.spro-case2,.spro-case2 *{box-sizing: border-box;}
.spro-case2{font-family: var(--sp-font-body);
  font-size: var(--sp-fs-body);
  line-height: 1.6;
  color: var(--sp-black);
  background: var(--sp-light);
  -webkit-font-smoothing: antialiased;}
.spro-case2 :where(.sp) a{color: inherit;}
.spro-case2 .sp-container{max-width: var(--sp-max); margin: 0 auto; padding: 0 var(--sp-gutter);}
.spro-case2 .sp-section{padding: var(--sp-section-y) 0;}
.spro-case2 .sp-section--dark{background: var(--sp-black); color: var(--sp-white);}
.spro-case2 .sp-split{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 40px;}
.spro-case2 .sp-split--half{grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);}
@media (max-width: 900px){.spro-case2 .sp-split,.spro-case2 .sp-split--half{grid-template-columns: 1fr; gap: 24px;}}
.spro-case2 .sp-display,.spro-case2 .sp-h2,.spro-case2 .sp-h3,.spro-case2 .sp-h4,.spro-case2 .sp-card-title,.spro-case2 .sp-row-title,.spro-case2 .sp-stat__num{font-family: var(--sp-font-display);
  font-weight: 500;
  letter-spacing: var(--sp-tracking-tight);
  margin: 0;}
.spro-case2 .sp-display{font-size: var(--sp-fs-display); line-height: 1.1;}
.spro-case2 .sp-h2{font-size: var(--sp-fs-h2); line-height: 1.1;}
.spro-case2 .sp-h3{font-size: var(--sp-fs-h3); line-height: 1.1;}
.spro-case2 .sp-h4{font-size: var(--sp-fs-h4); line-height: 1.15; font-weight: 400;}
.spro-case2 .sp-display em,.spro-case2 .sp-h2 em{font-style: normal; color: var(--sp-red);}
.spro-case2 .sp-lede{font-size: var(--sp-fs-body); line-height: 1.5; color: var(--sp-dark-gray); max-width: 440px; margin: 0;}
.spro-case2 .sp-body{color: var(--sp-dark-gray); margin: 0;}
.spro-case2 .sp-small{font-size: var(--sp-fs-sm); line-height: 1.4; color: var(--sp-dark-gray);}
.spro-case2 .sp-link{color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--sp-gray-350);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s;}
.spro-case2 .sp-link:hover{text-decoration-color: var(--sp-red);}
.spro-case2 .sp-eyebrow{display: inline-flex; align-items: center; gap: 10px; color: var(--sp-dark-gray); font-size: 16px; line-height: 1.6; margin: 0;}
.spro-case2 .sp-eyebrow::before{content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--sp-red); flex: none;}
.spro-case2 .sp-section--dark .sp-eyebrow{color: var(--sp-gray-400);}
.spro-case2 .sp-kicker{font-size: var(--sp-fs-xs); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-red); margin: 0;}
.spro-case2 .sp-outcome{display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--sp-dark-gray);}
.spro-case2 .sp-outcome::before{content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--sp-red);}
.spro-case2 .sp-btn{display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 20px;
  font: 400 16px/1 var(--sp-font-body);
  text-decoration: none; cursor: pointer;
  border: 1px solid var(--sp-black); border-radius: 0;
  transition: background .2s, color .2s, border-color .2s;}
.spro-case2 .sp-btn svg{width: 11px; height: 11px; transition: transform .25s var(--sp-ease);}
.spro-case2 .sp-btn:hover svg{transform: translateX(4px);}
.spro-case2 .sp-btn--primary{background: var(--sp-black); color: var(--sp-white);}
.spro-case2 .sp-btn--primary:hover{background: var(--sp-graphite); border-color: var(--sp-graphite);}
.spro-case2 .sp-btn--outline{background: transparent; color: var(--sp-black); padding: 12px 18px; height: auto; gap: 8px;}
.spro-case2 .sp-btn--outline:hover{border-color: var(--sp-red); color: var(--sp-red);}
.spro-case2 .sp-btn--header{height: 40px; padding: 0 12px; font-size: 14px; background: var(--sp-white); color: var(--sp-black);}
.spro-case2 .sp-btn--header:hover{border-color: var(--sp-red); color: var(--sp-red);}
.spro-case2 .sp-btn--ghost-light{background: transparent; color: var(--sp-white); border-color: var(--sp-white);}
.spro-case2 .sp-btn--ghost-light:hover{background: var(--sp-white); color: var(--sp-black);}
.spro-case2 .sp-icon-circle{display: inline-grid; place-items: center; flex: none;
  width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--sp-black); color: var(--sp-black);
  transition: background .2s, color .2s;}
.spro-case2 .sp-icon-circle svg{width: 10px; height: 10px; transition: transform .25s var(--sp-ease);}
.spro-case2 .sp-chips{display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0;}
.spro-case2 .sp-chip{display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 8px 10px; border: 1px solid var(--sp-dark-gray); font-size: 14px; line-height: 1; color: var(--sp-black);}
.spro-case2 .sp-chip small{color: var(--sp-muted); font-size: inherit;}
.spro-case2 .sp-tags{display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--sp-gray-400);}
.spro-case2 .sp-tags span{white-space: nowrap;}
.spro-case2 .sp-tags span + span::before{content: "|"; margin-right: 8px; color: var(--sp-graphite);}
.spro-case2 .sp-tags .sp-tags__badge{border: 1px solid var(--sp-graphite); padding: 0 6px; font-size: 12px;}
.spro-case2 .sp-tags .sp-tags__badge::before{content: none;}
.spro-case2 .sp-header{padding: 24px 0; border-bottom: 1px solid var(--sp-gray); background: var(--sp-light);}
.spro-case2 .sp-header__inner{display: flex; align-items: center; justify-content: space-between; gap: 24px;}
.spro-case2 .sp-logo{display: inline-flex; color: var(--sp-black);}
.spro-case2 .sp-logo svg{width: 121px; height: 45px; display: block;}
.spro-case2 .sp-nav{display: flex; align-items: center; gap: 28px; font-size: 14px; color: var(--sp-dark-gray);}
.spro-case2 .sp-nav a{text-decoration: none; transition: color .2s;}
.spro-case2 .sp-nav a:hover{color: var(--sp-black);}
.spro-case2 .sp-nav__lang{display: inline-flex; align-items: center; gap: 4px;}
@media (max-width: 900px){.spro-case2 .sp-nav a:not(.sp-btn),.spro-case2 .sp-nav__lang{display: none;}}
.spro-case2 .sp-hero{padding: 40px 0 56px; position: relative; overflow: hidden;}
.spro-case2 .sp-hero > .sp-container{position: relative;}
.spro-case2 .sp-hero__title .sp-indent{padding-left: 25%;}
.spro-case2 .sp-hero__body{margin-top: 40px; margin-left: 25%; max-width: 480px; display: grid; gap: 40px;}
.spro-case2 .sp-hero__cta{display: flex; align-items: center; gap: 24px; flex-wrap: wrap;}
.spro-case2 .sp-hero__deco{position: absolute; right: 0; top: 140px; width: min(46vw, 760px); pointer-events: none;}
@media (max-width: 900px){.spro-case2 .sp-hero__body{margin-left: 0;}
.spro-case2 .sp-hero__title .sp-indent{padding-left: 0;}
.spro-case2 .sp-hero__deco{opacity: .35;}}
.spro-case2 .sp-badge{display: inline-flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.3; color: var(--sp-black);}
.spro-case2 .sp-badge__img{width: 48px; height: 48px; flex: none; background: var(--sp-pink-100); display: grid; place-items: center; font-size: 10px; color: var(--sp-pink-700);}
.spro-case2 .sp-badge small{display: block; color: var(--sp-dark-gray); font-size: 13px;}
.spro-case2 .sp-logobar{border-top: 0; padding-top: 24px;}
.spro-case2 .sp-logobar__label{font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--sp-muted); margin: 0 0 16px;}
.spro-case2 .sp-logobar__row{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px 40px;}
.spro-case2 .sp-logobar__logo{font: 500 22px/1 var(--sp-font-display); color: var(--sp-dark-gray); opacity: 1; filter: grayscale(1);}
.spro-case2 .sp-trust{display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--sp-dark-gray); margin-top: 16px;}
.spro-case2 .sp-trust b{color: var(--sp-black); font-weight: 500;}
.spro-case2 .sp-trust .sp-star{color: var(--sp-red);}
.spro-case2 .sp-case{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); background: var(--sp-black); color: var(--sp-white); border: 1px solid var(--sp-black); min-height: 520px;}
.spro-case2 .sp-case__body{padding: 40px; display: flex; flex-direction: column; gap: 20px;}
.spro-case2 .sp-card-title{font-size: var(--sp-fs-card); line-height: 1.12; color: var(--sp-white);}
.spro-case2 .sp-case__text{color: var(--sp-gray-400); margin: 0;}
.spro-case2 .sp-case__metrics{margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 24px;}
.spro-case2 .sp-metric{border-top: 1px solid var(--sp-gray-400); padding-top: 16px; width: fit-content; min-width: 64px;}
.spro-case2 .sp-metric b{display: block; font: 500 var(--sp-fs-h4)/1.05 var(--sp-font-display); letter-spacing: var(--sp-tracking-tight);}
.spro-case2 .sp-metric span{font-size: 14px; line-height: 1.4; color: var(--sp-gray-400);}
.spro-case2 .sp-case__visual{position: relative; overflow: hidden; border-left: 1px solid var(--sp-graphite);}
@media (max-width: 900px){.spro-case2 .sp-case{grid-template-columns: 1fr;}
.spro-case2 .sp-case__visual{min-height: 260px; border-left: 0; border-top: 1px solid var(--sp-graphite);}}
.spro-case2 .sp-progress{display: flex; align-items: center; gap: 16px; font-size: 14px; color: var(--sp-dark-gray);}
.spro-case2 .sp-progress__track{flex: 1; height: 1px; background: var(--sp-gray); position: relative;}
.spro-case2 .sp-progress__track i{position: absolute; left: 0; top: -1px; height: 3px; background: var(--sp-red);}
.spro-case2 .sp-stats{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 40px;}
.spro-case2 .sp-stat__rule{width: 56px; height: 1px; background: var(--sp-dark-gray); margin-bottom: 16px;}
.spro-case2 .sp-stat__num{font-size: var(--sp-fs-stat); line-height: 1.1; display: block;}
.spro-case2 .sp-stat__label{color: var(--sp-black); line-height: 1.2; margin-top: 8px;}
.spro-case2 .sp-stat__sub{color: var(--sp-dark-gray); line-height: 1.2; margin-top: 6px; font-size: 15px;}
.spro-case2 .sp-rows{border-top: 1px solid var(--sp-gray);}
.spro-case2 .sp-row{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr) 24px; gap: 20px; align-items: start;
  padding: 24px 0; border-bottom: 1px solid var(--sp-gray);
  text-decoration: none; color: var(--sp-black);}
.spro-case2 .sp-row-title{font-size: var(--sp-fs-row); line-height: 1.4; transition: color .2s;}
.spro-case2 .sp-row__desc{color: var(--sp-dark-gray); line-height: 1.2; padding-top: 6px;}
.spro-case2 .sp-row:hover .sp-row-title{color: var(--sp-red);}
.spro-case2 .sp-row:hover .sp-icon-circle{background: var(--sp-black); color: var(--sp-white);}
.spro-case2 .sp-row:hover .sp-icon-circle svg{transform: translateX(3px);}
@media (max-width: 700px){.spro-case2 .sp-row{grid-template-columns: 1fr 24px;}
.spro-case2 .sp-row__desc{grid-column: 1;}}
.spro-case2 .sp-explore{display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--sp-black); text-decoration: none; color: var(--sp-black);}
.spro-case2 .sp-explore:hover .sp-icon-circle{background: var(--sp-black); color: var(--sp-white);}
.spro-case2 .sp-refs{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px;}
.spro-case2 .sp-ref{display: grid; grid-template-columns: 40px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--sp-gray); font-size: 13px; line-height: 1.4; color: var(--sp-dark-gray);}
.spro-case2 .sp-ref__mark{width: 40px; height: 32px; border: 1px solid var(--sp-gray); display: grid; place-items: center; font-weight: 500; color: var(--sp-black); background: var(--sp-white);}
.spro-case2 .sp-ref__title{font-size: 15px; font-weight: 500; color: var(--sp-black);}
.spro-case2 .sp-ref__sub{color: var(--sp-black);}
.spro-case2 .sp-ref__meta{margin-top: 8px; color: var(--sp-black); font-weight: 500;}
@media (max-width: 700px){.spro-case2 .sp-refs{grid-template-columns: 1fr;}}
.spro-case2 .sp-person{display: flex; align-items: center; gap: 12px;}
.spro-case2 .sp-person__avatar{width: 40px; height: 40px; flex: none; background: var(--sp-gray); display: grid; place-items: center; font-size: 13px; color: var(--sp-dark-gray); object-fit: cover;}
.spro-case2 .sp-person b{display: block; font-weight: 500; font-size: 14px;}
.spro-case2 .sp-person span{font-size: 12px; color: var(--sp-dark-gray);}
.spro-case2 .sp-contact-line{display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--sp-gray); font-size: 15px;}
.spro-case2 .sp-contact-line small{font-size: 11px; color: var(--sp-muted);}
.spro-case2 .sp-form-card{background: var(--sp-white); border: 1px solid var(--sp-line-soft); padding: 40px; display: grid; gap: 20px;}
.spro-case2 .sp-form-card__title{font: 500 var(--sp-fs-form-title)/1.15 var(--sp-font-display); letter-spacing: var(--sp-tracking-tight); margin: 0;}
.spro-case2 .sp-field{display: grid; gap: 8px;}
.spro-case2 .sp-label{font-size: 14px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; color: var(--sp-black);}
.spro-case2 .sp-input,.spro-case2 .sp-textarea{width: 100%; height: 48px; padding: 0 11px;
  font: 400 16px/1.2 var(--sp-font-body); color: var(--sp-black);
  background: var(--sp-white); border: 1px solid var(--sp-gray-350); border-radius: 0;
  transition: border-color .2s;}
.spro-case2 .sp-textarea{height: 112px; padding: 11px; resize: vertical;}
.spro-case2 .sp-input:focus,.spro-case2 .sp-textarea:focus{outline: 0; border-color: var(--sp-black);}
.spro-case2 .sp-form-links{display: flex; gap: 20px; font-size: 14px;}
.spro-case2 .sp-form-note{font-size: 11px; line-height: 1.5; color: var(--sp-muted); margin: 0;}
.spro-case2 .sp-form-card .sp-btn--primary{height: 44px; padding: 0 43px; width: fit-content;}
.spro-case2 .sp-form-card__foot{border-top: 1px solid var(--sp-line-soft); padding-top: 16px; display: grid; gap: 8px; font-size: 13px; color: var(--sp-dark-gray);}
.spro-case2 .sp-section--dark .sp-label,.spro-case2 .sp-footer .sp-label{color: var(--sp-white);}
.spro-case2 .sp-input--dark{background: transparent; border-color: var(--sp-gray-400); color: var(--sp-white);}
.spro-case2 .sp-input--dark:focus{border-color: var(--sp-white);}
.spro-case2 .sp-req{color: var(--sp-red);}
.spro-case2 .sp-faq details{border-bottom: 1px solid var(--sp-graphite);}
.spro-case2 .sp-faq summary{list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 18px 0; font-size: 16px; line-height: 1.2; color: var(--sp-white);
  transition: transform .2s var(--sp-ease);}
.spro-case2 .sp-faq summary::-webkit-details-marker{display: none;}
.spro-case2 .sp-faq summary:hover{transform: translateX(4px);}
.spro-case2 .sp-faq summary i{position: relative; width: 28px; height: 28px; flex: none; border: 1px solid var(--sp-gray-400); border-radius: 50%; transition: border-color .2s;}
.spro-case2 .sp-faq summary i::before,.spro-case2 .sp-faq summary i::after{content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1px; background: var(--sp-white); transform: translate(-50%, -50%); transition: transform .25s, background .2s;}
.spro-case2 .sp-faq summary i::after{transform: translate(-50%, -50%) rotate(90deg);}
.spro-case2 .sp-faq details[open] summary i::after{transform: translate(-50%, -50%) rotate(0deg);}
.spro-case2 .sp-faq summary:hover i{border-color: var(--sp-red);}
.spro-case2 .sp-faq summary:hover i::before,.spro-case2 .sp-faq summary:hover i::after{background: var(--sp-red);}
.spro-case2 .sp-faq details p{margin: 0 0 20px; color: var(--sp-gray-400); max-width: 60ch;}
.spro-case2 .sp-footer{background: var(--sp-black); color: var(--sp-light); padding: 100px 0 40px;}
.spro-case2 .sp-footer .sp-logo{color: var(--sp-white);}
.spro-case2 .sp-footer__grid{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 56px;}
.spro-case2 .sp-footer__news{display: grid; gap: 20px; align-content: start; max-width: 340px;}
.spro-case2 .sp-footer__news h3{font: 400 26px/1.2 var(--sp-font-display); letter-spacing: var(--sp-tracking-tight); margin: 24px 0 0;}
.spro-case2 .sp-footer__menu{display: grid; grid-template-columns: 1fr 2fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--sp-graphite);}
.spro-case2 .sp-footer__menu:first-child{padding-top: 0;}
.spro-case2 .sp-footer__title{font: 400 var(--sp-fs-lg)/1.3 var(--sp-font-display); letter-spacing: -0.01em; color: var(--sp-light); margin: 0;}
.spro-case2 .sp-footer__list{list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px;}
.spro-case2 .sp-footer__list a{font-size: 14px; letter-spacing: -0.01em; line-height: 1.2; color: var(--sp-gray); text-decoration: none;}
.spro-case2 .sp-footer__list a:hover{text-decoration: underline;}
.spro-case2 .sp-footer__addr{display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding-top: 24px; font-size: 13px; color: var(--sp-dark-gray);}
.spro-case2 .sp-footer__addr b{display: block; color: var(--sp-light); font-weight: 400; font-size: 14px; margin-bottom: 6px;}
.spro-case2 .sp-footer__bottom{margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--sp-graphite); display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 13px; color: var(--sp-gray);}
.spro-case2 .sp-footer__bottom a{text-decoration: none;}
@media (max-width: 900px){.spro-case2 .sp-footer__grid{grid-template-columns: 1fr;}
.spro-case2 .sp-footer__menu{grid-template-columns: 1fr;}}
.spro-case2 .sp-reveal{opacity: 0; transform: translateY(36px); transition: opacity .8s var(--sp-ease), transform .8s var(--sp-ease);}
.spro-case2 .sp-reveal.is-in{opacity: 1; transform: none;}
@media (prefers-reduced-motion: reduce){.spro-case2 .sp-reveal{opacity: 1; transform: none; transition: none;}}
.spro-case2 .ai{--red:#FF1E5A; --ink:#1A1A1A; --muted:#6B7280; --line:#E5E7EB; --bg-soft:#FAFAFA; --bg-tint:#F6F7F9;
    --dd-amber:#B45309; --dd-amber-bg:#FEF3C7; --ease:cubic-bezier(0.22,1,0.36,1);
    background:#fff; overflow:hidden; text-align:left; color: var(--ink);
    font-family:'Inter',-apple-system,system-ui,sans-serif;}
.spro-case2 .ai [hidden]{display:none !important;}
.spro-case2 .ai button{font: inherit; cursor: pointer;}
.spro-case2 .cp-top{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-bottom:1px solid var(--line);}
.spro-case2 .cp-top__id{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600;}
.spro-case2 .cp-logo{flex-shrink:0;}
.spro-case2 .dd-replay{border:1px solid var(--line); background:#fff; color:var(--muted); font-size:11px; font-weight:600; padding:5px 10px; border-radius:8px;}
.spro-case2 .dd-replay:hover{color:var(--ink); border-color:var(--muted);}
.spro-case2 .cp-body{position: relative; height: 380px; display: flex; flex-direction: column;}
.spro-case2 .dd-thread{flex: 1; padding:18px 18px; display:flex; flex-direction:column; gap:16px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width: none;}
.spro-case2 .dd-thread::-webkit-scrollbar{display: none;}
.spro-case2 .cp-user{display:flex; justify-content:flex-end;}
.spro-case2 .cp-user__bubble{max-width:86%; background:#F0F0F0; border-radius:16px; padding:9px 13px; font-size:13px; line-height:1.45;}
.spro-case2 .cp-msgchip{display:inline-block; font-size:12px; font-weight:600; color:#C80849; margin-right:4px;}
.spro-case2 .cp-turn{display:flex; flex-direction:column; gap:10px;}
.spro-case2 .cp-turn__body{display:flex; flex-direction:column; gap:12px;}
.spro-case2 .cp-name{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700;}
.spro-case2 .cp-ok{display:inline-flex; color:#107C41;}
.spro-case2 .cp-reason__head svg{width:14px; height:14px;}
.spro-case2 .cp-fade{animation:cp-fade .4s var(--ease) both;}
@keyframes cp-fade{ from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.spro-case2 .cp-queue{display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted);}
.spro-case2 .cp-queue__dot{width:11px; height:11px; border-radius:50%; background:#FF1E5A; box-shadow:0 0 0 4px rgba(255,30,90,.16); animation:cp-pulse 1.1s ease-in-out infinite;}
@keyframes cp-pulse{ 0%,100% { transform:scale(.8); opacity:.7; } 50% { transform:scale(1.15); opacity:1; } }
.spro-case2 .cp-reason__head{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; margin-bottom:6px;}
.spro-case2 .cp-reason__steps{display:flex; flex-direction:column;}
.spro-case2 .dd-spin{width:12px; height:12px; flex-shrink:0; border:2px solid #D9DEEA; border-top-color:#FF1E5A; border-radius:50%; animation:dd-spin .7s linear infinite;}
@keyframes dd-spin{ to { transform:rotate(360deg); } }
.spro-case2 .dd-step{display:flex; gap:10px; padding:5px 0; opacity:0; transform:translateY(6px); transition:opacity .35s var(--ease), transform .35s var(--ease);}
.spro-case2 .dd-step.show{opacity:1; transform:none;}
.spro-case2 .dd-step__dot{width:10px; height:10px; flex-shrink:0; margin-top:4px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.spro-case2 .dd-step__dot--ok{background:#2FA96B;}
.spro-case2 .dd-step__dot--flag{background:var(--dd-amber);}
.spro-case2 .dd-minispin{width:11px; height:11px; border:2px solid #D9DEEA; border-top-color:#FF1E5A; border-radius:50%; animation:dd-spin .7s linear infinite;}
.spro-case2 .dd-step__body{flex:1; min-width:0;}
.spro-case2 .dd-step__title{font-size:12.5px; font-weight:600;}
.spro-case2 .dd-step__detail{font-size:11.5px; color:var(--muted); margin-top:2px; line-height:1.45; display:none;}
.spro-case2 .dd-step.done .dd-step__detail{display:block;}
.spro-case2 .dd-srcsrc{color:#C80849; font-weight:600;}
.spro-case2 .cp-tools{display:flex; align-items:center; gap:2px;}
.spro-case2 .cp-tool{width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:var(--muted); background:none; border:0;}
.spro-case2 .cp-tool:hover{background:var(--bg-tint); color:var(--ink);}
.spro-case2 .cp-tool svg{width:14px; height:14px;}
.spro-case2 .dd-hitl{font-size:11.5px; color:var(--muted); background:var(--bg-soft); border:1px dashed var(--line); border-radius:9px; padding:9px 12px; line-height:1.5;}
.spro-case2 .dd-hitl b{color:#C80849;}
.spro-case2 .cp-home{flex: 1; padding:22px 20px 16px; overflow: hidden;}
.spro-case2 .cp-greet{font-size:20px; font-weight:600; letter-spacing:-.02em; margin:0 0 16px;}
.spro-case2 .cp-box{border:1px solid var(--line); border-radius:14px; background:#fff; box-shadow:0 2px 10px rgba(15,23,42,.06); padding:12px 14px 10px;}
.spro-case2 .cp-box__line{min-height:22px; display:flex; align-items:center; flex-wrap:wrap; gap:2px; font-size:13.5px; line-height:1.45;}
.spro-case2 .cp-chip{display:inline-flex; align-items:center; font-size:12px; font-weight:600; color:#C80849; background:#FFF0F2; border:1px solid #FFCAD6; border-radius:7px; padding:2px 7px; margin-right:6px;}
.spro-case2 .cp-caret{width:1.5px; height:17px; background:var(--ink); margin-left:1px; animation:cp-blink 1.05s steps(2) infinite;}
@keyframes cp-blink{ 50% { opacity:0; } }
.spro-case2 .cp-box__bar{display:flex; align-items:center; justify-content:space-between; margin-top:10px;}
.spro-case2 .cp-ic{width:24px; height:24px; display:flex; align-items:center; justify-content:center; color:var(--muted);}
.spro-case2 .cp-ic svg{width:15px; height:15px;}
.spro-case2 .cp-bar__right{display:flex; align-items:center; gap:10px;}
.spro-case2 .cp-send{width:30px; height:30px; border-radius:50%; background:#17171C; color:#fff; display:flex; align-items:center; justify-content:center; transition:transform .2s var(--ease);}
.spro-case2 .cp-send svg{width:14px; height:14px;}
.spro-case2 .cp-send.pulse{transform:scale(.86);}
.spro-case2 .cp-menu{margin-top:8px; border:1px solid var(--line); border-radius:12px; background:#fff; box-shadow:0 16px 40px -18px rgba(15,23,42,.25); padding:5px;}
.spro-case2 .cp-item{display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border-radius:9px; border:1.5px solid transparent;}
.spro-case2 .cp-item.focus{border-color:var(--ink); box-shadow:0 4px 14px rgba(15,23,42,.08);}
.spro-case2 .cp-item__ic{width:28px; height:28px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#fff;}
.spro-case2 .cp-item__ic svg{width:15px; height:15px;}
.spro-case2 .cp-item__body{min-width:0;}
.spro-case2 .cp-item__name{font-size:12.5px; font-weight:600;}
.spro-case2 .cp-item__desc{display:block; font-size:11px; color:var(--muted); line-height:1.4; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.spro-case2 .cp-dock{display:flex; align-items:center; gap:10px; border-top:1px solid var(--line); padding:10px 14px;}
.spro-case2 .cp-dock__txt{flex:1; border:1px solid var(--line); border-radius:10px; padding:9px 12px; font-size:12px; color:var(--muted); background:var(--bg-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.spro-case2 .cp-dock__send{width:32px; height:32px; flex-shrink:0; border-radius:50%; background:#17171C; color:#fff; display:flex; align-items:center; justify-content:center;}
.spro-case2 .cp-dock__send svg{width:13px; height:13px;}
.spro-case2 .dd-answer{min-width:0;}
.spro-case2 .dd-answer__p{font-size:13px; line-height:1.55; margin:0 0 10px;}
.spro-case2 .dd-answer__p b{font-weight:700;}
.spro-case2 .dd-answer__flag{display:flex; gap:8px; align-items:flex-start; background:var(--dd-amber-bg); border:1px solid #F3D9A0; border-radius:10px; padding:9px 11px; margin:0 0 12px; font-size:12px; line-height:1.5; color:#78350F;}
.spro-case2 .dd-answer__flag b{color:#92400E;}
.spro-case2 .dd-file{display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:12px; background:#fff; padding:11px 13px; box-shadow:0 2px 10px rgba(15,23,42,.05);}
.spro-case2 .dd-file__ic{width:30px; height:34px; flex-shrink:0;}
.spro-case2 .dd-file__ic svg{width:100%; height:100%;}
.spro-case2 .dd-file__body{flex:1; min-width:0;}
.spro-case2 .dd-file__name{font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.spro-case2 .dd-file__meta{font-size:11px; color:var(--muted); margin-top:2px;}
.spro-case2 .dd-file__open{flex-shrink:0; display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#17171C; background:#fff; border:1px solid #17171C; border-radius:999px; padding:7px 12px;}
.spro-case2 .dd-file__open svg{width:12px; height:12px;}
@media (prefers-reduced-motion: reduce){.spro-case2 .dd-step{transition:none !important;}
.spro-case2 .dd-spin,.spro-case2 .dd-minispin,.spro-case2 .cp-queue__dot,.spro-case2 .cp-caret,.spro-case2 .cp-fade{animation:none !important;}}
.spro-case2{margin: 0;}
.spro-case2 .cs-section{padding: 96px 0; border-top: 1px solid var(--sp-gray);}
.spro-case2 .cs-section--flush{border-top: 0;}
.spro-case2 .cs-label{position: sticky; top: 24px; align-self: start; display: grid; gap: 14px;}
.spro-case2 .cs-label .sp-kicker{color: var(--sp-muted);}
.spro-case2 .cs-prose{display: grid; gap: 20px; max-width: 720px;}
.spro-case2 .cs-prose p{margin: 0; color: var(--sp-dark-gray); font-size: 17px; line-height: 1.65;}
.spro-case2 .cs-prose p b{color: var(--sp-black); font-weight: 500;}
.spro-case2 .cs-h3{font: 500 30px/1.15 var(--sp-font-display); letter-spacing: -0.01em; margin: 0;}
.spro-case2 .cs-block{margin-top: 56px;}
.spro-case2 .cs-block > .sp-kicker{margin-bottom: 18px;}
.spro-case2 .cs-hero{padding: 72px 0 64px;}
.spro-case2 .cs-hero__grid{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 40px;}
.spro-case2 .cs-hero__title{margin-top: 18px;}
.spro-case2 .cs-hero__body{display: grid; gap: 32px; margin-top: 40px; max-width: 640px;}
.spro-case2 .cs-hero__body .sp-lede{max-width: 600px; font-size: 18px;}
.spro-case2 .cs-meta{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 64px; border-top: 1px solid var(--sp-black);}
.spro-case2 .cs-meta div{padding: 16px 20px 0 0;}
.spro-case2 .cs-meta dt{font-size: 12px; letter-spacing: 0;  color: var(--sp-muted);}
.spro-case2 .cs-meta dd{margin: 6px 0 0; font-size: 15px; line-height: 1.4;}
@media (max-width: 900px){.spro-case2 .cs-hero__grid{grid-template-columns: 1fr; gap: 0;}
.spro-case2 .cs-meta{grid-template-columns: 1fr 1fr; gap: 16px 0;}}
.spro-case2 .cs-stats{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px;}
.spro-case2 .cs-stats .sp-stat__num{font-size: clamp(48px, 5vw, 72px);}
.spro-case2 .cs-stats .sp-stat__num small{font-size: .45em; color: var(--sp-red); margin-left: 4px;}
.spro-case2 .sp-section--dark .sp-stat__rule{background: var(--sp-gray-400);}
.spro-case2 .sp-section--dark .sp-stat__label{color: var(--sp-white);}
.spro-case2 .sp-section--dark .sp-stat__sub{color: var(--sp-gray-400);}
@media (max-width: 900px){.spro-case2 .cs-stats{grid-template-columns: 1fr 1fr;}}
.spro-case2 .mj{background: var(--sp-white); border: 1px solid var(--sp-line-soft);}
.spro-case2 .mj__tabs{display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--sp-line-soft);}
.spro-case2 .mj__tab{flex: 1 1 0; min-width: 170px; text-align: left; padding: 18px 20px; background: none; border: 0; border-right: 1px solid var(--sp-line-soft); cursor: pointer; font: inherit; color: var(--sp-dark-gray); position: relative; transition: background .2s, color .2s;}
.spro-case2 .mj__tab:last-child{border-right: 0;}
.spro-case2 .mj__tab small{display: block; font-size: 12px; letter-spacing: 0;  color: var(--sp-muted); margin-bottom: 4px;}
.spro-case2 .mj__tab b{font: 500 18px/1.2 var(--sp-font-display); letter-spacing: -0.01em; color: var(--sp-black);}
.spro-case2 .mj__tab::after{content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: transparent; transition: background .2s;}
.spro-case2 .mj__tab:hover{background: var(--sp-light);}
.spro-case2 .mj__tab[aria-selected="true"]{background: var(--sp-pink-50);}
.spro-case2 .mj__tab[aria-selected="true"]::after{background: var(--sp-red);}
.spro-case2 .mj__tab[aria-selected="true"] small{color: var(--sp-red);}
.spro-case2 .mj__chart{position: relative; padding: 28px 24px 8px;}
.spro-case2 .mj__groups{display: grid; grid-template-columns: 1fr 1fr; font: 500 14px/1 var(--sp-font-body); color: var(--sp-muted); letter-spacing: 0;  margin-bottom: 12px;}
.spro-case2 .mj__groups span:last-child{border-left: 1px solid var(--sp-gray); padding-left: 16px;}
.spro-case2 .mj__cols{position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); min-height: 300px;}
.spro-case2 .mj__col{position: relative; padding: 14px 14px 18px; border-left: 1px solid var(--sp-line-soft); display: flex; flex-direction: column; gap: 6px; transition: background .35s var(--sp-ease), opacity .35s;}
.spro-case2 .mj__col:first-child{border-left: 0;}
.spro-case2 .mj__col:nth-child(4){border-left-color: var(--sp-gray);}
.spro-case2 .mj__lvl{font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--sp-red);}
.spro-case2 .mj__name{font: 500 17px/1.2 var(--sp-font-display); letter-spacing: -0.01em;}
.spro-case2 .mj__desc{font-size: 13px; line-height: 1.45; color: var(--sp-dark-gray); margin-top: auto; padding-top: 150px;}
.spro-case2 .mj__col.is-past{background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(116,118,132,.06) 7px 8px);}
.spro-case2 .mj__col.is-now{background: var(--sp-pink-50);}
.spro-case2 .mj__col.is-next{background: repeating-linear-gradient(135deg, transparent 0 7px, rgba(255,30,90,.08) 7px 8px);}
.spro-case2 .mj__col.is-off{opacity: .45;}
.spro-case2 .mj__col:nth-child(6) .mj__lvl{color: var(--sp-muted);}
.spro-case2 .mj__noise{display: inline-block; border: 1px solid var(--sp-red); color: var(--sp-red); font-size: 11px; padding: 2px 6px; margin-top: 4px; width: fit-content;}
.spro-case2 .mj__svg{position: absolute; inset: 104px 0 auto 0; width: 100%; height: 130px; pointer-events: none; overflow: visible; z-index: 2;}
.spro-case2 #mj-clip-r{transition: width .7s var(--sp-ease);}
.spro-case2 .mj__marker{position: absolute; top: 0; z-index: 3; transform: translate(-50%, -50%); transition: left .7s var(--sp-ease), top .7s var(--sp-ease); pointer-events: none;}
.spro-case2 .mj__marker i{display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--sp-red); box-shadow: 0 0 0 6px rgba(255,30,90,.18);}
.spro-case2 .mj__marker span{position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 500; background: var(--sp-black); color: var(--sp-white); padding: 4px 8px;}
.spro-case2 .mj__axis{display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 24px 22px; font-size: 11px; letter-spacing: 0;  color: var(--sp-muted);}
.spro-case2 .mj__axis .booster{color: var(--sp-red); font-weight: 500; display: flex; align-items: center; gap: 10px;}
.spro-case2 .mj__axis .booster i{display: inline-block; width: 120px; height: 1px; background: var(--sp-red); position: relative;}
.spro-case2 .mj__axis .booster i::after{content: ""; position: absolute; right: -1px; top: -4px; border: 4px solid transparent; border-left: 7px solid var(--sp-red);}
.spro-case2 .mj__panel{display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; padding: 28px 24px; border-top: 1px solid var(--sp-line-soft); background: var(--sp-light);}
.spro-case2 .mj__panel h4{font: 500 24px/1.2 var(--sp-font-display); letter-spacing: -0.01em; margin: 0 0 10px;}
.spro-case2 .mj__panel p{margin: 0; color: var(--sp-dark-gray);}
.spro-case2 .mj__panel ul{margin: 0; padding: 0; list-style: none; display: grid; gap: 10px;}
.spro-case2 .mj__panel li{display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 15px; line-height: 1.4;}
.spro-case2 .mj__panel li::before{content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sp-red); margin-top: 6px;}
.spro-case2 .mj__legend{display: flex; flex-wrap: wrap; gap: 18px; padding: 0 24px 20px; font-size: 13px; color: var(--sp-dark-gray);}
.spro-case2 .mj__legend span{display: inline-flex; align-items: center; gap: 8px;}
.spro-case2 .mj__legend i{width: 18px; height: 12px; border: 1px solid var(--sp-line-soft);}
@media (max-width: 1000px){.spro-case2 .mj__groups{display: none;}
.spro-case2 .mj__cols{grid-template-columns: 1fr 1fr; min-height: 0;}
.spro-case2 .mj__col{border-left: 0; border-top: 1px solid var(--sp-line-soft);}
.spro-case2 .mj__desc{padding-top: 6px;}
.spro-case2 .mj__svg,.spro-case2 .mj__marker{display: none;}
.spro-case2 .mj__panel{grid-template-columns: 1fr;}}
.spro-case2 .cs-quote{margin: 0; padding: 32px 0 0; border-top: 1px solid var(--sp-black); display: grid; gap: 16px;}
.spro-case2 .cs-quote blockquote{margin: 0; font: 400 clamp(26px, 2.6vw, 36px)/1.2 var(--sp-font-display); letter-spacing: -0.01em;}
.spro-case2 .cs-quote blockquote::before{content: "\201C"; color: var(--sp-red);}
.spro-case2 .cs-quote blockquote::after{content: "\201D"; color: var(--sp-red);}
.spro-case2 .cs-quote figcaption{font-size: 14px; color: var(--sp-dark-gray);}
.spro-case2 .cs-cards{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;}
.spro-case2 .cs-card{background: var(--sp-white); border: 1px solid var(--sp-line-soft); padding: 24px; display: grid; gap: 10px; align-content: start;}
.spro-case2 .cs-card__k{font-size: 12px; letter-spacing: 0;  color: var(--sp-red); font-weight: 500;}
.spro-case2 .cs-card h4{font: 500 20px/1.2 var(--sp-font-display); letter-spacing: -0.01em; margin: 0;}
.spro-case2 .cs-card p{margin: 0; font-size: 15px; line-height: 1.5; color: var(--sp-dark-gray);}
@media (max-width: 900px){.spro-case2 .cs-cards{grid-template-columns: 1fr;}}
.spro-case2 .intake{background: var(--sp-white); border: 1px solid var(--sp-line-soft); padding: 28px;}
.spro-case2 .intake__head{display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 20px;}
.spro-case2 .intake__head b{font: 500 48px/1 var(--sp-font-display); letter-spacing: -0.01em;}
.spro-case2 .intake__head span{color: var(--sp-dark-gray); font-size: 15px;}
.spro-case2 .intake__bar{display: flex; height: 56px; gap: 2px;}
.spro-case2 .intake__seg{position: relative; flex: var(--n) 1 0; display: flex; align-items: center; padding: 0 10px; font: 500 18px/1 var(--sp-font-display); color: var(--sp-white); min-width: 0; transition: filter .2s;}
.spro-case2 .intake__seg:hover{filter: brightness(1.08);}
.spro-case2 .intake__rows{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; margin-top: 22px;}
.spro-case2 .intake__row{display: grid; grid-template-columns: 14px 1fr; gap: 10px; font-size: 14px; line-height: 1.4; color: var(--sp-dark-gray);}
.spro-case2 .intake__row i{width: 14px; height: 14px; margin-top: 3px;}
.spro-case2 .intake__row b{color: var(--sp-black); font-weight: 500; display: block;}
@media (max-width: 900px){.spro-case2 .intake__rows{grid-template-columns: 1fr;}
.spro-case2 .intake__seg{font-size: 14px; padding: 0 6px;}}
.spro-case2 .pf{display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--sp-line-soft); background: var(--sp-white);}
.spro-case2 .pf__item{padding: 22px 18px; border-left: 1px solid var(--sp-line-soft); display: grid; gap: 8px; align-content: start;}
.spro-case2 .pf__item:first-child{border-left: 0;}
.spro-case2 .pf__n{font: 500 13px/1 var(--sp-font-body); color: var(--sp-red); letter-spacing: 0;}
.spro-case2 .pf__item h4{font: 500 22px/1.1 var(--sp-font-display); letter-spacing: -0.01em; margin: 0;}
.spro-case2 .pf__item p{margin: 0; font-size: 14px; line-height: 1.45; color: var(--sp-dark-gray);}
.spro-case2 .pf__eg{margin-top: 16px; padding: 18px 20px; background: var(--sp-black); color: var(--sp-gray-400); font-size: 15px; line-height: 1.6;}
.spro-case2 .pf__eg span{color: var(--sp-white); border-bottom: 2px solid var(--sp-red);}
.spro-case2 .pf__eg small{display: block; font-size: 11px; letter-spacing: 0;  color: var(--sp-muted); margin-bottom: 8px;}
@media (max-width: 900px){.spro-case2 .pf{grid-template-columns: 1fr 1fr;}
.spro-case2 .pf__item{border-left: 0; border-top: 1px solid var(--sp-line-soft);}}
.spro-case2 .shot{margin: 0; display: grid; gap: 12px;}
.spro-case2 .shot__frame{position: relative; background: var(--sp-white); border: 1px solid var(--sp-line-soft); box-shadow: 0 24px 60px -30px rgba(23,23,28,.35); overflow: hidden; cursor: zoom-in; padding: 0; display: block; width: 100%;}
.spro-case2 .shot__frame::before{content: ""; display: block; height: 26px; border-bottom: 1px solid var(--sp-line-soft); background:
      radial-gradient(circle at 14px 13px, var(--sp-gray) 4px, transparent 4.5px),
      radial-gradient(circle at 28px 13px, var(--sp-gray) 4px, transparent 4.5px),
      radial-gradient(circle at 42px 13px, var(--sp-gray) 4px, transparent 4.5px), var(--sp-light);}
.spro-case2 .shot__frame img{display: block; width: 100%; height: auto; transition: transform .6s var(--sp-ease);}
.spro-case2 .shot__frame:hover img{transform: scale(1.015);}
.spro-case2 .shot figcaption{font-size: 13px; line-height: 1.45; color: var(--sp-dark-gray); display: flex; gap: 10px;}
.spro-case2 .shot figcaption::before{content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--sp-red); margin-top: 6px;}
.spro-case2 .day{display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: start;}
.spro-case2 .day__list{display: grid; border-top: 1px solid var(--sp-gray);}
.spro-case2 .day__btn{display: grid; grid-template-columns: 64px 1fr; gap: 12px; text-align: left; padding: 16px 0; background: none; border: 0; border-bottom: 1px solid var(--sp-gray); cursor: pointer; font: inherit; color: var(--sp-dark-gray); transition: color .2s, padding .25s var(--sp-ease);}
.spro-case2 .day__btn time{font: 500 18px/1.3 var(--sp-font-display); color: var(--sp-muted);}
.spro-case2 .day__btn b{display: block; font-weight: 500; color: var(--sp-black);}
.spro-case2 .day__btn span{font-size: 13px; line-height: 1.4;}
.spro-case2 .day__btn:hover{padding-left: 6px;}
.spro-case2 .day__btn[aria-selected="true"] time{color: var(--sp-red);}
.spro-case2 .day__btn[aria-selected="true"]{padding-left: 6px; box-shadow: inset 3px 0 0 var(--sp-red);}
.spro-case2 .day__stage img{opacity: 1; transition: opacity .25s;}
.spro-case2 .day__stage.is-swapping img{opacity: 0;}
@media (max-width: 900px){.spro-case2 .day{grid-template-columns: 1fr;}}
.spro-case2 .gallery{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px;}
.spro-case2 .gallery--3{grid-template-columns: repeat(3, minmax(0, 1fr));}
@media (max-width: 900px){.spro-case2 .gallery,.spro-case2 .gallery--3{grid-template-columns: 1fr;}}
.spro-case2 .cfg .sp-row{grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) auto; cursor: default;}
.spro-case2 .cfg .sp-row:hover .sp-row-title{color: var(--sp-black);}
.spro-case2 .cfg .sp-row-title{font-size: 22px;}
.spro-case2 .dept{font-size: 12px; border: 1px solid var(--sp-gray-350); padding: 4px 8px; white-space: nowrap; color: var(--sp-dark-gray); align-self: start; margin-top: 4px;}
.spro-case2 .callout{display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; padding: 24px; background: var(--sp-pink-50); border-left: 3px solid var(--sp-red);}
.spro-case2 .callout svg{width: 36px; height: 36px; color: var(--sp-red);}
.spro-case2 .callout h4{margin: 0 0 6px; font: 500 20px/1.2 var(--sp-font-display); letter-spacing: -0.01em;}
.spro-case2 .callout p{margin: 0; color: var(--sp-dark-gray);}
.spro-case2 .arch{display: grid; gap: 8px;}
.spro-case2 .arch__layer{display: grid; grid-template-columns: 200px minmax(0, 1fr); background: var(--sp-white); border: 1px solid var(--sp-line-soft);}
.spro-case2 .arch__name{padding: 16px 18px; border-right: 1px solid var(--sp-line-soft); display: grid; gap: 2px; align-content: center;}
.spro-case2 .arch__name small{font-size: 11px; letter-spacing: 0; color: var(--sp-red); font-weight: 500;}
.spro-case2 .arch__name b{font: 500 17px/1.2 var(--sp-font-display); letter-spacing: -0.01em;}
.spro-case2 .arch__items{display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; align-items: center;}
.spro-case2 .arch__chip{font-size: 14px; padding: 7px 11px; border: 1px solid var(--sp-dark-gray); background: var(--sp-white);}
.spro-case2 .arch__chip--ai{background: var(--sp-black); color: var(--sp-white); border-color: var(--sp-black);}
.spro-case2 .arch__chip--plan{border-style: dashed;}
.spro-case2 .arch__layer--ext{background: transparent; border-style: dashed;}
.spro-case2 .arch__flow{display: flex; justify-content: center; color: var(--sp-muted); font-size: 12px; letter-spacing: 0;  gap: 8px; align-items: center;}
.spro-case2 .arch__flow svg{width: 12px; height: 12px;}
@media (max-width: 700px){.spro-case2 .arch__layer{grid-template-columns: 1fr;}
.spro-case2 .arch__name{border-right: 0; border-bottom: 1px solid var(--sp-line-soft);}}
.spro-case2 .decisions{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--sp-black); counter-reset: d;}
.spro-case2 .decision{padding: 20px 20px 22px 0; border-bottom: 1px solid var(--sp-gray); counter-increment: d; display: grid; grid-template-columns: 40px 1fr; gap: 8px;}
.spro-case2 .decision::before{content: counter(d, decimal-leading-zero); font: 500 14px/1.6 var(--sp-font-body); color: var(--sp-red);}
.spro-case2 .decision b{display: block; font-weight: 500; margin-bottom: 4px;}
.spro-case2 .decision p{margin: 0; font-size: 14px; line-height: 1.45; color: var(--sp-dark-gray);}
.spro-case2 .decision--key{background: var(--sp-pink-50); padding-left: 14px;}
@media (max-width: 900px){.spro-case2 .decisions{grid-template-columns: 1fr;}}
.spro-case2 .poc{display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 40px; padding: 48px 0; border-top: 1px solid var(--sp-gray); align-items: start;}
.spro-case2 .poc:first-of-type{border-top: 0; padding-top: 0;}
.spro-case2 .poc__text{display: grid; gap: 14px;}
.spro-case2 .poc__tag{display: inline-flex; gap: 8px; flex-wrap: wrap;}
.spro-case2 .poc__tag span{font-size: 12px; padding: 4px 8px; border: 1px solid var(--sp-gray-350); color: var(--sp-dark-gray);}
.spro-case2 .poc__tag span.lvl{background: var(--sp-black); color: var(--sp-white); border-color: var(--sp-black);}
.spro-case2 .poc__text p{margin: 0; color: var(--sp-dark-gray);}
.spro-case2 .poc__text ul{margin: 0; padding-left: 18px; color: var(--sp-dark-gray); display: grid; gap: 6px; font-size: 15px;}
.spro-case2 .poc__demo{border: 1px solid var(--sp-line-soft); box-shadow: 0 24px 60px -30px rgba(23,23,28,.35);}
.spro-case2 .poc__demo .cp-body{height: 440px;}
@media (max-width: 900px){.spro-case2 .poc{grid-template-columns: 1fr;}}
.spro-case2 .res{width: 100%; border-collapse: collapse; font-size: 15px;}
.spro-case2 .res th{text-align: left; font-size: 12px; letter-spacing: 0;  color: var(--sp-muted); font-weight: 500; padding: 0 16px 12px 0; border-bottom: 1px solid var(--sp-black);}
.spro-case2 .res td{padding: 16px 16px 16px 0; border-bottom: 1px solid var(--sp-gray); vertical-align: top; line-height: 1.4;}
.spro-case2 .res td:first-child{font: 500 17px/1.3 var(--sp-font-display); letter-spacing: -0.01em; white-space: nowrap;}
.spro-case2 .res td:first-child small{display: block; font: 500 11px/1 var(--sp-font-body); letter-spacing: 0; color: var(--sp-red); margin-bottom: 4px;}
.spro-case2 .res td:nth-child(2){color: var(--sp-muted);}
.spro-case2 .status{display: inline-flex; align-items: center; gap: 8px;}
.spro-case2 .status::before{content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none;}
.spro-case2 .status--done::before{background: var(--sp-red);}
.spro-case2 .status--poc::before{background: transparent; border: 2px solid var(--sp-red);}
.spro-case2 .status--hold::before{background: var(--sp-gray);}
@media (max-width: 700px){.spro-case2 .res td:nth-child(2),.spro-case2 .res th:nth-child(2){display: none;}
.spro-case2 .res td:first-child{white-space: normal;}}
.spro-case2 .lessons .sp-faq summary{font: 400 22px/1.3 var(--sp-font-display); letter-spacing: -0.01em; padding: 22px 0;}
.spro-case2 .lessons .sp-faq summary span{display: flex; gap: 20px; align-items: baseline;}
.spro-case2 .lessons .sp-faq summary em{font: 500 13px/1 var(--sp-font-body); font-style: normal; color: var(--sp-red);}
.spro-case2 .lessons .sp-faq details p{margin-left: 40px; font-size: 16px;}
.spro-case2 .sp-section--dark .sp-h2{color: var(--sp-white);}
.spro-case2 .next{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;}
.spro-case2 .next__item{padding: 24px; border: 1px solid var(--sp-line-soft); background: var(--sp-white); display: grid; gap: 8px; align-content: start;}
.spro-case2 .next__item time{font-size: 12px; letter-spacing: 0;  color: var(--sp-red); font-weight: 500;}
.spro-case2 .next__item b{font: 500 20px/1.2 var(--sp-font-display); letter-spacing: -0.01em; font-weight: 500;}
.spro-case2 .next__item p{margin: 0; font-size: 15px; color: var(--sp-dark-gray);}
@media (max-width: 900px){.spro-case2 .next{grid-template-columns: 1fr;}}
.spro-case2 .cta{display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: end;}
.spro-case2 .cta .sp-lede{max-width: 520px; margin-top: 20px; font-size: 18px;}
.spro-case2 .cta__actions{display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end;}
@media (max-width: 900px){.spro-case2 .cta{grid-template-columns: 1fr;}
.spro-case2 .cta__actions{justify-content: flex-start;}}
.spro-case2 .cs-foot{padding: 32px 0; border-top: 1px solid var(--sp-gray); font-size: 13px; color: var(--sp-muted);}
.spro-case2 .cs-foot .sp-container{display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;}
.spro-case2 .lb{border: 0; padding: 0; background: transparent; max-width: min(1500px, 94vw); max-height: 92vh;}
.spro-case2 .lb::backdrop{background: rgba(23,23,28,.86);}
.spro-case2 .lb img{display: block; max-width: 100%; max-height: 86vh; width: auto; height: auto; margin: 0 auto; background: var(--sp-white);}
.spro-case2 .lb p{color: var(--sp-gray-400); font-size: 14px; text-align: center; margin: 12px 0 0;}
.spro-case2 .lb button{position: fixed; top: 20px; right: 24px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--sp-gray-400); background: transparent; color: var(--sp-white); font-size: 20px; cursor: pointer;}
.spro-case2 .lb button:hover{border-color: var(--sp-red); color: var(--sp-red);}
.spro-case2 .read-progress{position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--sp-red); z-index: 50;}
.spro-case2 .sp-split > *,.spro-case2 .poc > *{min-width: 0;}
.spro-case2 .hs{display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 64px; align-items: start;}
.spro-case2 .hs__list{list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px;}
.spro-case2 .hs__list li{display: grid; grid-template-columns: 120px minmax(0, 1fr) 52px; gap: 16px; align-items: center;}
.spro-case2 .hs__team{font-size: 15px; color: var(--sp-gray);}
.spro-case2 .hs__bar{height: 14px; background: var(--sp-ink-2); position: relative;}
.spro-case2 .hs__bar i{position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 10%); background: var(--sp-red); transform-origin: left; animation: hs-grow 1.2s var(--sp-ease) both;}
.spro-case2 .hs__list li:first-child .hs__bar i{background: var(--sp-pink-400);}
.spro-case2 .hs__list b{font: 500 26px/1 var(--sp-font-display); letter-spacing: -0.01em; text-align: right;}
.spro-case2 .hs__note{margin: 18px 0 0; font-size: 13px; color: var(--sp-muted);}
.spro-case2 .hs__side{display: grid; gap: 22px;}
.spro-case2 .hs__side .sp-stat__num{font-size: 48px;}
.spro-case2 .hs__side .sp-stat__rule{margin-bottom: 10px;}
@keyframes hs-grow{ from { transform: scaleX(0); } to { transform: none; } }
@media (prefers-reduced-motion: reduce){.spro-case2 .hs__bar i{animation: none;}}
@media (max-width: 900px){.spro-case2 .hs{grid-template-columns: 1fr; gap: 40px;}
.spro-case2 .hs__side{grid-template-columns: 1fr 1fr 1fr; gap: 16px;}
.spro-case2 .hs__side .sp-stat__num{font-size: 40px;}
.spro-case2 .hs__list li{grid-template-columns: 96px minmax(0, 1fr) 44px; gap: 10px;}}
.spro-case2 .ucl{background: var(--sp-white); border: 1px solid var(--sp-line-soft); padding: 24px 28px;}
.spro-case2 .ucl__head{display: flex; align-items: baseline; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--sp-black);}
.spro-case2 .ucl__head b{font: 500 44px/1 var(--sp-font-display); letter-spacing: -0.02em;}
.spro-case2 .ucl__head span{font-size: 14px; color: var(--sp-dark-gray); max-width: 420px;}
.spro-case2 .ucl__list{list-style: none; margin: 0; padding: 0; columns: 3; column-gap: 32px; counter-reset: u;}
.spro-case2 .ucl__list li{counter-increment: u; break-inside: avoid; display: grid; grid-template-columns: 30px 1fr; padding: 9px 0; border-bottom: 1px solid var(--sp-line-soft); font-size: 14px; line-height: 1.35;}
.spro-case2 .ucl__list li::before{content: counter(u, decimal-leading-zero); font-size: 12px; color: var(--sp-red); padding-top: 1px; font-variant-numeric: tabular-nums;}
@media (max-width: 900px){.spro-case2 .ucl__list{columns: 2;}}
@media (max-width: 520px){.spro-case2 .ucl__list{columns: 1;}
.spro-case2 .ucl{padding: 20px;}}
@keyframes cp-fade{ from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.spro-case2 .crit{display: grid; margin-top: 40px;}
.spro-case2 .crit-prose{max-width: 720px;}
.spro-case2 .crit-prose p b{color: var(--sp-black); font-weight: 500;}
.spro-case2 .cs-h4{font: 500 22px/1.2 var(--sp-font-display); letter-spacing: -0.01em; margin: 16px 0 0;}
.spro-case2 .crit__intro{grid-column: 1 / -1; margin: 0; font-size: 17px; line-height: 1.6; color: var(--sp-black); max-width: 720px;}
.spro-case2 .crit__grp{display: grid; gap: 14px; align-content: start;}
.spro-case2 .crit__grp h4{margin: 0; font-size: 12px; letter-spacing: 0;  color: var(--sp-red); font-weight: 500; padding-bottom: 10px; border-bottom: 1px solid var(--sp-black);}
.spro-case2 .crit__grp p{margin: 0; font-size: 15px; line-height: 1.55; color: var(--sp-dark-gray);}
.spro-case2 .crit__grp p b{color: var(--sp-black); font-weight: 500;}
@media (max-width: 800px){.spro-case2 .crit{grid-template-columns: 1fr; padding: 20px;}}
.spro-case2,.spro-case2 *{text-transform: none !important;}
.spro-case2 .sp-kicker,.spro-case2 .sp-logobar__label{letter-spacing: 0 !important; font-size: 13px;}
.spro-case2 .crit__ex{grid-column: 1 / -1; display: grid; gap: 14px; margin-top: 8px;}
.spro-case2 .crit__ex h4{margin: 0; font-size: 13px; color: var(--sp-red); font-weight: 500; padding-bottom: 10px; border-bottom: 1px solid var(--sp-black);}
.spro-case2 .crit__cards{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;}
.spro-case2 .crit__card{padding: 18px; border: 1px solid var(--sp-line-soft); display: grid; gap: 8px; align-content: start;}
.spro-case2 .crit__card span{font-size: 12px; font-weight: 500; padding: 4px 8px; width: fit-content;}
.spro-case2 .crit__card b{font: 500 19px/1.2 var(--sp-font-display); letter-spacing: -0.01em;}
.spro-case2 .crit__card p{margin: 0; font-size: 14px; line-height: 1.5; color: var(--sp-dark-gray);}
.spro-case2 .crit__card--build span{background: var(--sp-black); color: var(--sp-white);}
.spro-case2 .crit__card--exp span{background: var(--sp-pink-300); color: var(--sp-black);}
.spro-case2 .crit__card--qw span{background: var(--sp-red); color: var(--sp-white);}
@media (max-width: 900px){.spro-case2 .crit__cards{grid-template-columns: 1fr;}}
.spro-case2 .arch__items--stack{display: grid; gap: 12px;}
.spro-case2 .arch__row{display: flex; flex-wrap: wrap; gap: 8px;}
.spro-case2 .arch__pts{display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 12px; border-top: 1px dashed var(--sp-line-soft);}
.spro-case2 .arch__pts span{font-size: 12px; padding: 4px 8px; background: var(--sp-pink-50); color: var(--sp-black);}
.spro-case2 .arch__pts .arch__pts-l{background: none; padding: 0 6px 0 0; color: var(--sp-red); font-weight: 500;}
.spro-case2 .tiers{grid-column: 1 / -1; display: grid; gap: 14px; margin-bottom: 32px;}
.spro-case2 .tiers__h{margin: 0; font-size: 13px; color: var(--sp-red); font-weight: 500; padding-bottom: 10px; border-bottom: 1px solid var(--sp-black);}
.spro-case2 .tiers__intro{margin: 0; color: var(--sp-dark-gray); max-width: 680px;}
.spro-case2 .tiers__grid{display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; align-items: start;}
.spro-case2 .tiers__stack{display: grid; gap: 8px; position: relative; padding-left: 32px;}
.spro-case2 .tier{display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 18px 20px; border: 1px solid var(--sp-line-soft);}
.spro-case2 .tier--build{background: var(--sp-black); color: var(--sp-white); margin: 0 32px 0 64px; border-color: var(--sp-black);}
.spro-case2 .tier--extend{background: #EDEEF2; margin: 0 16px 0 32px;}
.spro-case2 .tier--adopt{background: var(--sp-white);}
.spro-case2 .tier__k{display: block; font-size: 12px; color: var(--sp-red); font-weight: 500; margin-bottom: 6px;}
.spro-case2 .tier b{display: block; font: 500 22px/1.2 var(--sp-font-display); letter-spacing: -0.01em;}
.spro-case2 .tier p{margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--sp-dark-gray);}
.spro-case2 .tier--build p{color: var(--sp-gray-400);}
.spro-case2 .tier__tag{flex: none; font-size: 12px; padding: 5px 9px; border: 1px solid var(--sp-red); color: var(--sp-red); white-space: nowrap;}
.spro-case2 .tier--build .tier__tag{color: var(--sp-pink-300); border-color: var(--sp-pink-300);}
.spro-case2 .tier__axis{position: absolute; left: 8px; top: 0; bottom: 0; width: 1px; background: var(--sp-gray-350);}
.spro-case2 .tier__axis::before{content: ""; position: absolute; top: -2px; left: -4px; border: 4px solid transparent; border-bottom: 7px solid var(--sp-gray-350); transform: translateY(-8px);}
.spro-case2 .tier__axis span{position: absolute; left: -7px; top: 50%; transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap; font-size: 11px; color: var(--sp-muted); background: var(--sp-light); padding: 0 6px;}
.spro-case2 .tiers__gov{border: 1px solid var(--sp-line-soft); background: var(--sp-white); padding: 18px; display: grid; gap: 0;}
.spro-case2 .tiers__gov-h{margin: 0 0 6px; font: 500 18px/1.2 var(--sp-font-display); letter-spacing: -0.01em;}
.spro-case2 .tiers__gov div{padding: 10px 0; border-top: 1px solid var(--sp-line-soft); display: grid; gap: 2px;}
.spro-case2 .tiers__gov b{font-size: 13px; font-weight: 500; color: var(--sp-red);}
.spro-case2 .tiers__gov span{font-size: 14px; line-height: 1.4; color: var(--sp-dark-gray);}
.spro-case2 .crit__plat{font-style: normal; font-size: 13px; font-weight: 500; color: var(--sp-black); padding-top: 8px; border-top: 1px solid var(--sp-line-soft);}
@media (max-width: 900px){.spro-case2 .tiers__grid{grid-template-columns: 1fr;}
.spro-case2 .tier--build,.spro-case2 .tier--extend{margin: 0;}
.spro-case2 .tier{flex-direction: column;}}
@media (max-width: 480px){.spro-case2 .tiers__stack{padding-left: 0;}
.spro-case2 .tier__axis{display: none;}}
.spro-case2 .streams{display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 12px;}
.spro-case2 .stream{background: var(--sp-white); border: 1px solid var(--sp-line-soft); padding: 18px; display: grid; gap: 12px; align-content: start;}
.spro-case2 .stream--top{border-color: var(--sp-black);}
.spro-case2 .stream__head b{display: block; font: 500 18px/1.2 var(--sp-font-display); letter-spacing: -0.01em;}
.spro-case2 .stream__head span{font-size: 12px; color: var(--sp-muted);}
.spro-case2 .stream ol{margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: s;}
.spro-case2 .stream li{counter-increment: s; display: grid; grid-template-columns: 22px 1fr; font-size: 14px; line-height: 1.35; padding: 7px 10px; background: var(--sp-light);}
.spro-case2 .stream--top li{background: var(--sp-black); color: var(--sp-white);}
.spro-case2 .stream li::before{content: counter(s); font-size: 11px; color: var(--sp-red); padding-top: 2px;}
@media (max-width: 1000px){.spro-case2 .streams{grid-template-columns: 1fr 1fr;}}
@media (max-width: 600px){.spro-case2 .streams{grid-template-columns: 1fr;}}
.spro-case2 .matrix-wrap{overflow-x: auto; background: var(--sp-white); border: 1px solid var(--sp-line-soft);}
.spro-case2 .matrix{border-collapse: collapse; width: 100%; min-width: 680px; font-size: 14px;}
.spro-case2 .matrix th{font-weight: 500; font-size: 12px; color: var(--sp-dark-gray); text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--sp-black); vertical-align: bottom;}
.spro-case2 .matrix th:nth-child(n+3){text-align: center; width: 80px;}
.spro-case2 .matrix td{padding: 12px; border-bottom: 1px solid var(--sp-line-soft);}
.spro-case2 .matrix td:first-child{font-weight: 500;}
.spro-case2 .matrix td:nth-child(n+3){text-align: center;}
.spro-case2 .matrix i{display: inline-block; width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--sp-gray);}
.spro-case2 .matrix i.on{background: var(--sp-red); border-color: var(--sp-red);}
.spro-case2 .matrix tbody tr:hover{background: var(--sp-pink-50);}
.spro-case2 .dc{font-size: 12px; padding: 3px 8px; white-space: nowrap;}
.spro-case2 .dc--client{background: var(--sp-black); color: var(--sp-white);}
.spro-case2 .dc--conf{border: 1px solid var(--sp-black);}
.spro-case2 .dc--lic{border: 1px dashed var(--sp-gray-350); color: var(--sp-dark-gray);}
.spro-case2 .ccf{display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 0; margin-top: 28px; border: 1px solid var(--sp-line-soft); background: var(--sp-white);}
.spro-case2 .ccf__col{padding: 22px;}
.spro-case2 .ccf__h{font-size: 12px; letter-spacing: 0;  color: var(--sp-muted); margin: 0 0 14px; font-weight: 500;}
.spro-case2 .ccf__life{list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative;}
.spro-case2 .ccf__life li{position: relative; padding: 0 0 12px 18px; display: grid;}
.spro-case2 .ccf__life li::before{content: ""; position: absolute; left: 0; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--sp-red);}
.spro-case2 .ccf__life li::after{content: ""; position: absolute; left: 3.5px; top: 16px; bottom: 0; width: 1px; background: var(--sp-pink-200);}
.spro-case2 .ccf__life li:last-child::after{display: none;}
.spro-case2 .ccf__life b{font-weight: 500; font-size: 14px;}
.spro-case2 .ccf__life span{font-size: 12px; color: var(--sp-dark-gray);}
.spro-case2 .ccf__core{padding: 22px; background: var(--sp-black); color: var(--sp-white); position: relative;}
.spro-case2 .ccf__core .ccf__h{color: var(--sp-gray-400);}
.spro-case2 .ccf__badge{display: inline-block; background: var(--sp-red); color: var(--sp-white); font: 500 15px/1 var(--sp-font-display); padding: 8px 12px; margin-bottom: 18px;}
.spro-case2 .ccf__pts{list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px;}
.spro-case2 .ccf__pts li{font-size: 13px; border: 1px solid var(--sp-graphite); padding: 5px 9px; color: var(--sp-gray);}
.spro-case2 .ccf__feeds{margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--sp-graphite); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px;}
.spro-case2 .ccf__feeds span{color: var(--sp-gray-400); margin-right: 4px;}
.spro-case2 .ccf__feeds b{font-weight: 500; background: var(--sp-white); color: var(--sp-black); padding: 5px 9px;}
.spro-case2 .ccf__src{list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;}
.spro-case2 .ccf__src li{font-size: 14px; padding: 8px 10px; border: 1px solid var(--sp-line-soft); display: flex; justify-content: space-between;}
.spro-case2 .ccf__src li::after{content: "\2192"; color: var(--sp-red);}
@media (max-width: 1000px){.spro-case2 .ccf{grid-template-columns: 1fr;}}
.spro-case2 .donut{display: grid; grid-template-columns: minmax(240px, 340px) minmax(0, 1fr); gap: 40px; align-items: start; background: var(--sp-white); border: 1px solid var(--sp-line-soft); padding: 32px;}
.spro-case2 .donut__chart{position: relative;}
.spro-case2 .donut__chart svg{display: block; width: 100%; height: auto; overflow: visible;}
.spro-case2 .donut__seg{cursor: pointer; transition: transform .35s var(--sp-ease), opacity .25s; transform-origin: 110px 110px; outline: none;}
.spro-case2 .donut__seg.is-dim{opacity: .28;}
.spro-case2 .donut__seg.is-on{transform: scale(1.04);}
.spro-case2 .donut__center{position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none;}
.spro-case2 .donut__center b{font: 500 56px/1 var(--sp-font-display); letter-spacing: -0.02em;}
.spro-case2 .donut__center span{font-size: 13px; color: var(--sp-dark-gray); max-width: 130px; margin: 6px auto 0; line-height: 1.3;}
.spro-case2 .donut__legend{display: grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.spro-case2 .donut__legend button{display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border: 1px solid var(--sp-line-soft); background: var(--sp-white); font: inherit; font-size: 14px; cursor: pointer; transition: border-color .2s, background .2s;}
.spro-case2 .donut__legend button i{width: 12px; height: 12px;}
.spro-case2 .donut__legend button b{font: 500 18px/1 var(--sp-font-display);}
.spro-case2 .donut__legend button[aria-selected="true"]{border-color: var(--sp-black); background: var(--sp-light);}
.spro-case2 .donut__panel{margin-top: 18px;}
.spro-case2 .donut__panel h4{margin: 0 0 4px; font: 500 22px/1.2 var(--sp-font-display); letter-spacing: -0.01em;}
.spro-case2 .donut__panel > p{margin: 0 0 14px; color: var(--sp-dark-gray); font-size: 15px;}
.spro-case2 .donut__list{list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px;}
.spro-case2 .donut__list li{display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--sp-line-soft); font-size: 14px; line-height: 1.3;}
.spro-case2 .donut__list small{color: var(--sp-muted); font-size: 12px; white-space: nowrap;}
@media (max-width: 900px){.spro-case2 .donut{grid-template-columns: 1fr; padding: 20px;}
.spro-case2 .donut__chart{max-width: 300px; margin: 0 auto; width: 100%;}
.spro-case2 .donut__list{grid-template-columns: 1fr;}}
@media (max-width: 480px){.spro-case2 .donut__legend{grid-template-columns: 1fr;}}
.spro-case2 .vs{border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px;}
.spro-case2 .vs thead th{text-align: left; padding: 16px 14px; font: 500 18px/1.2 var(--sp-font-display); letter-spacing: -0.01em; border-bottom: 1px solid var(--sp-black);}
.spro-case2 .vs thead th small{display: block; font: 400 12px/1.4 var(--sp-font-body); color: var(--sp-muted);}
.spro-case2 .vs thead th:nth-child(2){color: var(--sp-red);}
.spro-case2 .vs tbody th{text-align: left; font-weight: 500; padding: 10px 14px; width: 130px; color: var(--sp-dark-gray);}
.spro-case2 .vs td{padding: 10px 14px; border-bottom: 1px solid var(--sp-line-soft); line-height: 1.4;}
.spro-case2 .vs td:nth-child(2){background: var(--sp-pink-50);}
.spro-case2 .vs__grp td{font-size: 11px; letter-spacing: 0;  color: var(--sp-red); font-weight: 500; background: transparent !important; padding-top: 18px;}
.spro-case2 .ck{background: var(--sp-white); border: 1px solid var(--sp-line-soft);}
.spro-case2 .ck__top{display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 16px 20px; border-bottom: 1px solid var(--sp-line-soft); font-size: 14px; color: var(--sp-dark-gray);}
.spro-case2 .ck__ex{display: flex; flex-wrap: wrap; gap: 6px;}
.spro-case2 .ck__ex button{font: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid var(--sp-gray-350); background: var(--sp-white); cursor: pointer;}
.spro-case2 .ck__ex button[aria-pressed="true"]{background: var(--sp-black); color: var(--sp-white); border-color: var(--sp-black);}
.spro-case2 .ck__cols{display: grid; grid-template-columns: 1fr 1fr;}
.spro-case2 .ck fieldset{border: 0; margin: 0; padding: 20px; display: grid; gap: 4px; align-content: start; min-width: 0;}
.spro-case2 .ck fieldset + fieldset{border-left: 1px solid var(--sp-line-soft);}
.spro-case2 .ck legend{font-size: 12px; letter-spacing: 0;  color: var(--sp-red); font-weight: 500; padding: 0; margin-bottom: 10px; float: left; width: 100%;}
.spro-case2 .ck label{display: grid; grid-template-columns: 20px 1fr; gap: 10px; font-size: 14px; line-height: 1.4; padding: 8px 0; border-bottom: 1px solid var(--sp-line-soft); cursor: pointer;}
.spro-case2 .ck input{width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--sp-red);}
.spro-case2 .ck__verdict{display: grid; grid-template-columns: auto 1fr; gap: 16px 20px; align-items: center; padding: 18px 20px; background: var(--sp-black); color: var(--sp-white);}
.spro-case2 .ck__verdict b{font: 500 22px/1.2 var(--sp-font-display); letter-spacing: -0.01em;}
.spro-case2 .ck__verdict p{margin: 0; color: var(--sp-gray-400); font-size: 14px;}
.spro-case2 .ck__pill{font-size: 12px; letter-spacing: 0;  padding: 6px 10px; background: var(--sp-red); color: var(--sp-white); white-space: nowrap;}
.spro-case2 .ck__pill--exp{background: var(--sp-pink-300); color: var(--sp-black);}
.spro-case2 .ck__pill--qw{background: var(--sp-white); color: var(--sp-black);}
@media (max-width: 800px){.spro-case2 .ck__cols{grid-template-columns: 1fr;}
.spro-case2 .ck fieldset + fieldset{border-left: 0; border-top: 1px solid var(--sp-line-soft);}
.spro-case2 .ck__verdict{grid-template-columns: 1fr;}}
.spro-case2 .desk{display: grid; grid-template-columns: 220px minmax(0, 1fr); border: 1px solid var(--sp-line-soft); background: var(--sp-white);}
.spro-case2 .desk__times{display: grid; align-content: start; border-right: 1px solid var(--sp-line-soft);}
.spro-case2 .desk__times button{text-align: left; padding: 16px 18px; border: 0; border-bottom: 1px solid var(--sp-line-soft); background: none; font: inherit; cursor: pointer; display: grid; gap: 2px; transition: background .2s;}
.spro-case2 .desk__times time{font: 500 20px/1.2 var(--sp-font-display); color: var(--sp-muted);}
.spro-case2 .desk__times b{font-weight: 500; font-size: 14px;}
.spro-case2 .desk__times button:hover{background: var(--sp-light);}
.spro-case2 .desk__times button[aria-selected="true"]{background: var(--sp-pink-50); box-shadow: inset 3px 0 0 var(--sp-red);}
.spro-case2 .desk__times button[aria-selected="true"] time{color: var(--sp-red);}
.spro-case2 .desk__stage{padding: 24px; min-height: 420px; background: var(--sp-light); min-width: 0;}
.spro-case2 .desk__panel[hidden]{display: none;}
.spro-case2 .desk__panel{display: grid; gap: 16px; animation: cp-fade .4s var(--sp-ease) both;}
.spro-case2 .desk__lead{margin: 0; font-size: 16px; line-height: 1.5;}
.spro-case2 .cp-card{background: var(--sp-white); border: 1px solid var(--sp-line-soft); border-radius: 10px; padding: 14px 16px; box-shadow: 0 10px 30px -20px rgba(23,23,28,.4);}
.spro-case2 .cp-card__top{display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--sp-dark-gray); margin-bottom: 8px;}
.spro-case2 .cp-card__prompt{margin: 0; font-size: 14px; line-height: 1.55;}
.spro-case2 .cp-card mark{background: #FDECC8; color: #8A4B08; padding: 0 3px;}
.spro-case2 .cp-card--sched{border-style: dashed;}
.spro-case2 .desk__caps{display: flex; flex-wrap: wrap; gap: 8px;}
.spro-case2 .desk__caps span{font-size: 13px; padding: 6px 10px 6px 28px; background: var(--sp-white); border: 1px solid var(--sp-line-soft); position: relative;}
.spro-case2 .desk__caps span::before{content: ""; position: absolute; left: 10px; top: 50%; width: 10px; height: 6px; border-left: 2px solid var(--sp-red); border-bottom: 2px solid var(--sp-red); transform: translateY(-70%) rotate(-45deg);}
.spro-case2 .feat3{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;}
.spro-case2 .feat3--2{grid-template-columns: 1fr 1fr;}
.spro-case2 .feat3 > div{background: var(--sp-white); border: 1px solid var(--sp-line-soft); padding: 16px;}
.spro-case2 .feat3 b{font-weight: 500; display: block; margin-bottom: 6px;}
.spro-case2 .feat3 p{margin: 0; font-size: 14px; line-height: 1.45; color: var(--sp-dark-gray);}
.spro-case2 .feat3 em{font-style: normal; font-size: 11px; color: var(--sp-red); border: 1px solid var(--sp-pink-300); padding: 1px 5px; margin-left: 4px; white-space: nowrap;}
.spro-case2 .desk__note{font-size: 14px; padding: 12px 14px; border-left: 3px solid var(--sp-red); background: var(--sp-white);}
.spro-case2 .flow3{display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 8px; align-items: stretch;}
.spro-case2 .flow3 > div{background: var(--sp-white); border: 1px solid var(--sp-line-soft); padding: 14px;}
.spro-case2 .flow3 b{font-weight: 500; display: block; margin-bottom: 4px; font-size: 14px;}
.spro-case2 .flow3 p{margin: 0; font-size: 13px; line-height: 1.4; color: var(--sp-dark-gray);}
.spro-case2 .flow3 i{font-style: normal; color: var(--sp-red); align-self: center;}
@media (max-width: 900px){.spro-case2 .desk{grid-template-columns: 1fr;}
.spro-case2 .desk__times{grid-template-columns: 1fr 1fr; border-right: 0; border-bottom: 1px solid var(--sp-line-soft);}
.spro-case2 .feat3,.spro-case2 .feat3--2{grid-template-columns: 1fr;}
.spro-case2 .flow3{grid-template-columns: 1fr;}
.spro-case2 .flow3 i{transform: rotate(90deg); justify-self: center;}}
.spro-case2 .ll{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: ll;}
.spro-case2 .ll__item{counter-increment: ll; background: var(--sp-white); border: 1px solid var(--sp-line-soft); padding: 18px; display: grid; gap: 8px; align-content: start; transition: border-color .2s, transform .3s var(--sp-ease);}
.spro-case2 .ll__item:hover{border-color: var(--sp-black); transform: translateY(-3px);}
.spro-case2 .ll__item::before{content: counter(ll, decimal-leading-zero); font-size: 12px; color: var(--sp-red); font-weight: 500;}
.spro-case2 .ll__item b{font: 500 18px/1.2 var(--sp-font-display); letter-spacing: -0.01em;}
.spro-case2 .ll__item p{margin: 0; font-size: 14px; line-height: 1.45; color: var(--sp-dark-gray);}
.spro-case2 .ll__item--key{background: var(--sp-black); border-color: var(--sp-black);}
.spro-case2 .ll__item--key b{color: var(--sp-white);}
.spro-case2 .ll__item--key p{color: var(--sp-gray-400);}
@media (max-width: 1000px){.spro-case2 .ll{grid-template-columns: 1fr 1fr;}}
@media (max-width: 480px){.spro-case2 .ll{grid-template-columns: 1fr;}}
.spro-case2 .dd{background: var(--sp-white); border: 1px solid var(--sp-line-soft);}
.spro-case2 .dd__tabs{display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--sp-line-soft);}
.spro-case2 .dd__tabs button{flex: 1 1 0; min-width: 140px; padding: 16px 18px; border: 0; border-right: 1px solid var(--sp-line-soft); background: none; font: 500 17px/1.2 var(--sp-font-display); letter-spacing: -0.01em; cursor: pointer; text-align: left; color: var(--sp-dark-gray); position: relative;}
.spro-case2 .dd__tabs button:last-child{border-right: 0;}
.spro-case2 .dd__tabs button[aria-selected="true"]{color: var(--sp-black); background: var(--sp-pink-50); box-shadow: inset 0 -3px 0 var(--sp-red);}
.spro-case2 .dd__meta{display: flex; flex-wrap: wrap; gap: 8px 20px; padding: 14px 20px; font-size: 13px; color: var(--sp-dark-gray); border-bottom: 1px solid var(--sp-line-soft);}
.spro-case2 .dd__meta b{color: var(--sp-red); font-weight: 500; margin-right: 4px;}
.spro-case2 .dd__body{display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); gap: 24px; padding: 20px;}
.spro-case2 .dd__h{font-size: 12px; letter-spacing: 0;  color: var(--sp-muted); margin: 0 0 12px; font-weight: 500;}
.spro-case2 .dd__steps{list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: st;}
.spro-case2 .dd__steps li{counter-increment: st; display: grid; grid-template-columns: 26px 1fr; font-size: 14px; padding: 8px 10px; border: 1px solid var(--sp-line-soft); line-height: 1.3;}
.spro-case2 .dd__steps li::before{content: counter(st); color: var(--sp-muted); font-size: 12px; padding-top: 1px;}
.spro-case2 .dd__steps li.hit{border-color: var(--sp-red);}
.spro-case2 .dd__steps li.hit::before{color: var(--sp-red);}
.spro-case2 .dd__ideas{display: grid; gap: 10px;}
.spro-case2 .idea{padding: 14px 16px; border: 1px solid var(--sp-line-soft); display: grid; gap: 4px; animation: cp-fade .4s var(--sp-ease) both;}
.spro-case2 .idea b{font-weight: 500;}
.spro-case2 .idea p{margin: 0; font-size: 14px; line-height: 1.45; color: var(--sp-dark-gray);}
.spro-case2 .idea span{font-size: 11px; letter-spacing: 0;  color: var(--sp-red); font-weight: 500;}
.spro-case2 .idea--noai span{color: var(--sp-muted);}
.spro-case2 .idea--noai{background: var(--sp-light);}
.spro-case2 .idea--out{background: var(--sp-black); border-color: var(--sp-black);}
.spro-case2 .idea--out b{color: var(--sp-white);}
.spro-case2 .idea--out p{color: var(--sp-gray-400);}
@media (max-width: 800px){.spro-case2 .dd__body{grid-template-columns: 1fr;}}
.spro-case2 .rflow{display: grid; gap: 0; justify-items: stretch; background: var(--sp-white); border: 1px solid var(--sp-line-soft); padding: 24px;}
.spro-case2 .rflow__node,.spro-case2 .rflow__gate{padding: 14px 16px; border: 1px solid var(--sp-black); font: 500 17px/1.2 var(--sp-font-display); display: grid; gap: 4px;}
.spro-case2 .rflow__node small,.spro-case2 .rflow__gate small{font: 400 13px/1.3 var(--sp-font-body); color: var(--sp-dark-gray);}
.spro-case2 .rflow__node--ai{background: var(--sp-black); color: var(--sp-white);}
.spro-case2 .rflow__node--ai small{color: var(--sp-gray-400);}
.spro-case2 .rflow__gate{border-color: var(--sp-red); background: var(--sp-pink-50);}
.spro-case2 .rflow__arrow{height: 28px; width: 1px; background: var(--sp-gray-350); justify-self: center; position: relative;}
.spro-case2 .rflow__arrow::after{content: ""; position: absolute; bottom: -1px; left: -4px; border: 4px solid transparent; border-top: 6px solid var(--sp-gray-350);}
.spro-case2 .rflow__opts{display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;}
.spro-case2 .rflow__opts span{font-size: 13px; text-align: center; padding: 10px 6px; border: 1px dashed var(--sp-gray-350);}
@media (max-width: 480px){.spro-case2 .rflow__opts{grid-template-columns: 1fr;}}
.spro-case2{color-scheme: light;}
.spro-case2,.spro-case2{background: #F9F9FA; color: #17171C;}
.spro-case2{overflow-x: clip;}/* s204: site integration — hero image from the featured image, spacing under the site header, no own header/footer */
.spro-case2 .cs-hero__img{margin-top:40px}
.spro-case2 .cs-hero__img img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.spro-case2__main{display:block}

/* s204b: content visible by default (s199 rule); reveal animation off */
.spro-case2 .sp-reveal{opacity:1!important;transform:none!important;transition:none!important}

/* s204c (HoM 563 b-e, designer 2026-11-04-case2-template-A) */
.spro-case2 h1,.spro-case2 h2,.spro-case2 h3,.spro-case2 h4,.spro-case2 .mj__tab b{hyphens:none!important;-webkit-hyphens:none!important;overflow-wrap:normal}
.spro-case2 .cs-hero__cta{margin:28px 0 24px}
@media (max-width:700px){
  .spro-case2 .cs-hero{padding:24px 0 40px}
  .spro-case2 .cs-hero__title{font-size:34px!important;line-height:1.12;margin-top:10px}
  .spro-case2 .cs-hero__body{margin-top:18px}
  .spro-case2 .cs-hero__cta{margin:18px 0 22px}
  .spro-case2 .cs-hero .sp-lede{font-size:17px!important;line-height:1.5}
  .spro-case2 .cs-hero__cta .sp-btn{width:100%;justify-content:center}
  .spro-case2 .mj__tabs{display:flex!important;flex-direction:column;gap:8px;grid-template-columns:none!important}
  .spro-case2 .mj__tab{width:100%;text-align:left}
  .spro-case2 .cs-meta dt,.spro-case2 .hs__note,.spro-case2 .mj__tab small,.spro-case2 .mj__lvl,.spro-case2 .mj__desc,.spro-case2 .mj__noise,
  .spro-case2 .mj__marker span,.spro-case2 .booster,.spro-case2 .mj__axis span,.spro-case2 .mj__legend span,.spro-case2 .sp-kicker,.spro-case2 .cs-card__k,
  .spro-case2 .donut__center span,.spro-case2 .donut__list small,.spro-case2 .tiers__h,.spro-case2 .tier__k,.spro-case2 .tier__tag,.spro-case2 .tiers__gov b,
  .spro-case2 .tiers__gov span,.spro-case2 .crit__ex h4,.spro-case2 .crit__card span,.spro-case2 .crit__plat,.spro-case2 .arch__name small,.spro-case2 .arch__pts-l,
  .spro-case2 .arch__pts span,.spro-case2 .arch__flow,.spro-case2 .matrix th,.spro-case2 .matrix td,.spro-case2 .matrix span,.spro-case2 .dc,.spro-case2 .lvl,
  .spro-case2 .poc__tag span,.spro-case2 .sp-chip,.spro-case2 .sp-eyebrow,.spro-case2 .sp-small,.spro-case2 .sp-faq em,.spro-case2 .next__item time,
  .spro-case2 .ai,.spro-case2 .ai *:not(svg):not(path){font-size:14px!important}
  .spro-case2 .ai .cp-greet{font-size:20px!important}
  .spro-case2 .matrix{min-width:0}
}

/* s204d (HoM 563 re-review): H1 = same family/weight as H2; agent thread end visible; labels in flow on phones */
.spro-case2 .cs-hero__title,.spro-case2 .sp-display{font-family:var(--sp-font-display),Archivo,sans-serif!important;font-weight:500!important;font-synthesis:none}
.spro-case2 .sp-h2{font-family:var(--sp-font-display),Archivo,sans-serif!important;font-weight:500!important;font-synthesis:none}
@media (max-width:700px){
  .spro-case2 .cs-label,.spro-case2 .sp-split>div:first-child{position:static!important;top:auto!important}
  .spro-case2 .cs-label{margin-bottom:12px}
}
.spro-case2 .cp-body{height:560px!important}
@media (max-width:700px){.spro-case2 .cp-body{height:540px!important}}

/* s204e (case A port: 03-text + 04-assets components; reusable for all case2 pages) */
.spro-case2 .cs-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.spro-case2 .mj__state{display:none}
.spro-case2 .cs-photo{margin:40px 0 0;border:1px solid var(--sp-line-soft);background:var(--sp-white)}
.spro-case2 .cs-photo img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.spro-case2 .cs-photo figcaption{padding:10px 14px;font-size:14px;color:var(--sp-dark-gray)}
.spro-case2 .cs-catlist{margin:16px 0;padding-left:20px}
.spro-case2 .cs-catlist li{margin:0 0 8px}
.spro-case2 .cs-callout{margin:20px 0;padding:14px 18px;background:var(--sp-pink-50);border-left:2px solid var(--sp-red);color:var(--sp-black);font-weight:500}
.spro-case2 .cs-steps{list-style:none;counter-reset:st;margin:24px 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.spro-case2 .cs-steps li{counter-increment:st;position:relative;padding:20px 18px 18px;border:1px solid var(--sp-line-soft);background:var(--sp-white);font-size:15px}
.spro-case2 .cs-steps li::before{content:"0" counter(st);display:block;font:500 22px/1 var(--sp-font-display);color:var(--sp-red);margin-bottom:10px}
.spro-case2 .cs-steps li b{display:block;margin-bottom:6px;color:var(--sp-black)}
.spro-case2 .cs-day{list-style:none;margin:20px 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.spro-case2 .cs-day li{padding:12px 14px;background:var(--sp-pink-50);font-size:14px;color:var(--sp-black)}
.spro-case2 .cs-day li b{display:block;color:var(--sp-red);font-weight:500;margin-bottom:4px}
.spro-case2 .cs-checks{list-style:none;margin:12px 0 20px;padding:0}
.spro-case2 .cs-checks li{position:relative;padding:6px 0 6px 28px}
.spro-case2 .cs-checks li::before{content:"";position:absolute;left:2px;top:12px;width:12px;height:7px;border-left:2px solid var(--sp-red);border-bottom:2px solid var(--sp-red);transform:rotate(-45deg)}
.spro-case2 .cs-card__link,.spro-case2 .cs-related{margin:10px 0 0;font-size:15px}
.spro-case2 .cs-card__link a,.spro-case2 .cs-related a,.spro-case2 .tiers__intro a,.spro-case2 .next__item a{color:var(--sp-black);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--sp-red)}
.spro-case2 .tiers__gov-note{margin:8px 0 0;font-size:14px;color:var(--sp-dark-gray)}
.spro-case2 .poc__illus{display:inline-block;margin:0 0 10px;padding:4px 10px;border:1px solid var(--sp-red);color:var(--sp-red);font-size:14px;font-weight:500}
.spro-case2 .next__item--plan{border-style:dashed}
.spro-case2 .next__item--plan time::after{content:"";display:inline-block;width:8px;height:8px;margin-left:8px;border:1px solid var(--sp-red);border-radius:50%;vertical-align:middle}
.spro-case2 .cs-swipe{display:none}
.spro-case2 .sp-faq--light details{border-bottom:1px solid var(--sp-line-soft)}
.spro-case2 .sp-faq--light summary{font:500 19px/1.35 var(--sp-font-display);padding:20px 0;color:var(--sp-black);cursor:pointer;display:flex;justify-content:space-between;gap:20px;list-style:none}
.spro-case2 .sp-faq--light summary i{border-color:var(--sp-gray)}
.spro-case2 .sp-faq--light summary i::before,.spro-case2 .sp-faq--light summary i::after{background:var(--sp-black)}
.spro-case2 .sp-faq--light details p{color:var(--sp-dark-gray);font-size:16px;max-width:70ch}
.spro-case2 .cs-morelink{display:inline-block;margin-left:24px;color:var(--sp-white);text-decoration:underline;text-underline-offset:4px;align-self:center}
.spro-case2 .cs-footnote{margin:32px 0 48px;font-size:14px;color:var(--sp-dark-gray)}
.spro-case2 .matrix th:first-child,.spro-case2 .matrix td:first-child{position:sticky;left:0;z-index:1;background:var(--sp-white)}
@media (max-width:700px){
  .spro-case2 .matrix{min-width:680px!important}
  .spro-case2 .matrix th:first-child,.spro-case2 .matrix td:first-child{width:140px;min-width:140px;box-shadow:1px 0 0 var(--sp-line-soft)}
  .spro-case2 .cs-swipe{display:block;margin:10px 0 0;font-size:14px;color:var(--sp-dark-gray)}
  .spro-case2 .cs-swipe::before{content:"\2194\00a0"}
  .spro-case2 .cs-steps{grid-template-columns:1fr;border-left:2px solid var(--sp-red);padding-left:16px;gap:12px}
  .spro-case2 .cs-day{grid-template-columns:1fr 1fr}
  .spro-case2 .cs-morelink{margin:16px 0 0;display:block}
  .spro-case2 .sp-faq--light summary{font-size:17px}
  /* journey: tabs scroll, levels as a vertical rail */
  .spro-case2 .mj__tabs{display:flex!important;flex-direction:row!important;overflow-x:auto;gap:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .spro-case2 .mj__tab{flex:0 0 auto;min-width:170px;width:auto!important}
  .spro-case2 .mj__cols{display:flex!important;flex-direction:column;border-left:2px solid var(--sp-line-soft);margin-left:8px;padding-left:0}
  .spro-case2 .mj__col{border:0!important;padding:12px 12px 14px 22px}
  .spro-case2 .mj__col::before{content:"";position:absolute;left:-7px;top:18px;width:12px;height:12px;border-radius:50%;background:var(--sp-white);border:2px solid var(--sp-gray)}
  .spro-case2 .mj__col.is-past::before{background:var(--sp-gray);border-color:var(--sp-gray)}
  .spro-case2 .mj__col.is-now::before{background:var(--sp-red);border-color:var(--sp-red);box-shadow:0 0 0 6px rgba(255,30,90,.18)}
  .spro-case2 .mj__col.is-next::before{border-color:var(--sp-red);border-style:dashed}
  .spro-case2 .mj__state{display:inline-block;align-self:flex-start;padding:2px 8px;border:1px solid var(--sp-line-soft);font-size:14px;color:var(--sp-dark-gray)}
  .spro-case2 .mj__col.is-now .mj__state{border-color:var(--sp-red);color:var(--sp-red)}
}
@media (max-width:700px){.spro-case2 .mj__tabs{flex-wrap:nowrap!important;border-bottom:1px solid var(--sp-line-soft)}.spro-case2 .mj__tab{border-bottom:0}}

/* s204g (case A stage 7): data class inside the sticky column on phones, so the first frame shows dots */
.spro-case2 .dc-m{display:none}
@media (max-width:700px){
  .spro-case2 .matrix th:nth-child(2),.spro-case2 .matrix td:nth-child(2){display:none}
  .spro-case2 .matrix{min-width:620px!important}
  .spro-case2 .matrix th:first-child,.spro-case2 .matrix td:first-child{width:150px;min-width:150px}
  .spro-case2 .dc-m{display:block;margin-top:6px}
  .spro-case2 .dc-m .dc{display:inline-block}
  .spro-case2 .matrix th:nth-child(n+3),.spro-case2 .matrix td:nth-child(n+3){width:72px;min-width:72px}
}

/* s204h: journey marker moves without transition until a tab is clicked (layout/resize re-placement must not animate) */
.spro-case2 .mj:not(.is-anim) .mj__marker{transition:none!important}

/* s204i: case2 pages only (this file loads only there) — theme toast .message-copied sits off-screen and widened the mobile layout viewport */
html,body{overflow-x:clip}
.message-copied{max-width:100vw}

/* s204j (case A live re-check): donut legend always visible; matrix scroll indicator; journey tabs stacked on phones */
.spro-case2 .donut__legend button{cursor:pointer}
.spro-case2 .matrix-shell{position:relative}
@media (max-width:700px){
  .spro-case2 .mj__tabs{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;overflow:visible!important;gap:8px}
  .spro-case2 .mj__tab{flex:none!important;min-width:0!important;width:100%!important;max-width:100%}
  .spro-case2 .matrix-shell::after{content:"";position:absolute;top:1px;right:1px;bottom:1px;width:40px;pointer-events:none;background:linear-gradient(to left,var(--sp-white),rgba(255,255,255,0));z-index:2}
  .spro-case2 .cs-swipe{display:block;text-align:right;font-weight:500;color:var(--sp-red)}
  .spro-case2 .cs-swipe::before{content:none}
  .spro-case2 .cs-swipe::after{content:"\00a0\2192"}
}

/* s204k (designer v8 minor): sticky bar edge on dark bands; dimmed donut segments keep their own colour; h3 spacing */
.spro-s143-bar{border-top:1px solid rgba(255,255,255,.4);box-shadow:0 -2px 14px rgba(0,0,0,.35)}
.spro-case2 .donut__seg.is-dim{opacity:.5;filter:saturate(.7)}
.spro-case2 .cs-h3{margin-bottom:16px}

/* s204l: native case visuals (oneBanking/NCB): tiers, status strip, confirmation flow, roles */
.spro-case2 .obv{border:1px solid var(--sp-line-soft);background:var(--sp-white);padding:24px;margin-top:32px;position:relative}
.spro-case2 .obv-head{font:500 20px/1.25 var(--sp-font-display);margin:0 0 18px;color:var(--sp-black)}
.spro-case2 .obv-cap{margin:16px 0 0;font-size:14px;color:var(--sp-dark-gray)}
.spro-case2 .obv-tiers__bar{background:var(--sp-black);color:var(--sp-white);font-size:14px;padding:10px 14px;margin:0 0 18px}
.spro-case2 .obv-tiers__groups{display:grid;grid-template-columns:1fr 1fr;gap:0}
.spro-case2 .obv-tiers__g{display:flex;flex-wrap:wrap;gap:10px;padding:0 18px}
.spro-case2 .obv-tiers__g+.obv-tiers__g{border-left:1px solid var(--sp-line-soft)}
.spro-case2 .obv-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid #D1D2D6;border-radius:999px;font-size:16px;font-weight:500;color:var(--sp-black)}
.spro-case2 .obv-chip--hi::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sp-red)}
.spro-case2 .obv-status__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;position:relative}
.spro-case2 .obv-status__i{position:relative;padding:28px 16px 16px;border:1px solid var(--sp-line-soft);display:grid;gap:6px}
.spro-case2 .obv-status__i i{position:absolute;top:12px;left:16px;width:10px;height:10px;border-radius:50%;background:var(--sp-black)}
.spro-case2 .obv-status__i--now i{background:var(--sp-white);border:2px solid var(--sp-red)}
.spro-case2 .obv-status__i--later i{background:transparent;border:2px dashed #B9BAC4}
.spro-case2 .obv-status__i--later b,.spro-case2 .obv-status__i--later span{color:var(--sp-muted)}
.spro-case2 .obv-status__i b{font:500 18px/1.25 var(--sp-font-display)}
.spro-case2 .obv-status__i span{font-size:14px;color:var(--sp-dark-gray)}
.spro-case2 .obv-tag{position:absolute;top:16px;right:16px;padding:3px 10px;border-radius:999px;background:var(--sp-pink-50);color:#C80849;font-size:14px;font-weight:500}
.spro-case2 .obv-flow__list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.spro-case2 .obv-flow__i{border:1px solid var(--sp-line-soft);border-radius:20px;padding:16px;display:grid;gap:6px;position:relative}
.spro-case2 .obv-flow__i small{color:var(--sp-red);font-weight:500;font-size:14px}
.spro-case2 .obv-flow__i b{font:500 17px/1.25 var(--sp-font-display)}
.spro-case2 .obv-flow__i span{font-size:14px;color:var(--sp-dark-gray)}
.spro-case2 .obv-flow__i--on{border:2px solid var(--sp-red)}
.spro-case2 .obv-flow__i+.obv-flow__i::before{content:"\2192";position:absolute;left:-13px;top:50%;transform:translateY(-50%);color:var(--sp-red);font-weight:700}
.spro-case2 .obv-flow__rule{margin:18px 0 0;font-size:16px;font-weight:500;color:var(--sp-black)}
.spro-case2 .obv-roles__list{list-style:none;margin:0;padding:12px 0 0;border-top:3px solid var(--sp-black);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.spro-case2 .obv-roles__i{border:1px solid var(--sp-line-soft);padding:16px;display:grid;gap:6px}
.spro-case2 .obv-roles__i small{font-size:14px;color:var(--sp-dark-gray)}
.spro-case2 .obv-roles__i b{font:500 20px/1.25 var(--sp-font-display)}
.spro-case2 .cs-steps--text{grid-template-columns:1fr 1fr}
@media (max-width:700px){
  .spro-case2 .obv{padding:18px}
  .spro-case2 .obv-tiers__groups{grid-template-columns:1fr;gap:14px}
  .spro-case2 .obv-tiers__g{padding:0}
  .spro-case2 .obv-tiers__g+.obv-tiers__g{border-left:0;border-top:1px solid var(--sp-line-soft);padding-top:14px}
  .spro-case2 .obv-status__list,.spro-case2 .obv-flow__list,.spro-case2 .obv-roles__list,.spro-case2 .cs-steps--text{grid-template-columns:1fr}
  .spro-case2 .obv-flow__i+.obv-flow__i::before{content:"\2193";left:50%;top:-14px;transform:translateX(-50%)}
  .spro-case2 .obv-tag{position:static;display:inline-block}
  .spro-case2 .obv-flow__list{margin-top:14px}
}

/* s204m: NCB visuals — neutral phone mock + list, confirmed/not-published columns, three quality cards */
.spro-case2 .nv-scope{display:grid;grid-template-columns:260px 1fr;gap:32px;align-items:start}
.spro-case2 .nv-phone{position:relative;margin:0;width:260px;border-radius:28px;border:1px solid #3A3B44;background:var(--sp-black);padding:22px 18px;color:var(--sp-white)}
.spro-case2 .nv-phone .obv-tag{top:-12px;right:-8px}
.spro-case2 .nv-screen small{display:block;color:#B9BAC4;font-size:14px}
.spro-case2 .nv-screen>b{display:block;font:500 28px/1.2 var(--sp-font-display);margin:4px 0 16px}
.spro-case2 .nv-screen>b em{font-style:normal;font-size:14px;color:#B9BAC4}
.spro-case2 .nv-acts{display:flex;justify-content:space-between;margin-bottom:16px}
.spro-case2 .nv-act{display:grid;justify-items:center;gap:6px;font-size:14px;color:#B9BAC4}
.spro-case2 .nv-act i{width:36px;height:36px;border-radius:50%;border:1px solid #B9BAC4}
.spro-case2 .nv-rows{list-style:none;margin:0 0 16px;padding:0}
.spro-case2 .nv-rows li{display:flex;justify-content:space-between;gap:8px;padding:10px 0;border-top:1px solid #3A3B44;font-size:14px}
.spro-case2 .nv-rows li span{color:#B9BAC4}
.spro-case2 .nv-card{height:120px;border-radius:14px;background:linear-gradient(135deg,#24252C,#3A3B44);position:relative}
.spro-case2 .nv-card span{position:absolute;left:14px;bottom:12px;font-size:14px;color:#B9BAC4}
.spro-case2 .nv-list ul{list-style:none;margin:0;padding:0}
.spro-case2 .nv-list li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--sp-line-soft);font-size:16px}
.spro-case2 .nv-list li::before{content:"";position:absolute;left:0;top:20px;width:8px;height:8px;border-radius:50%;background:var(--sp-red)}
.spro-case2 .nv-role__cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.spro-case2 .nv-role__c{border:1px solid var(--sp-line-soft);padding:18px}
.spro-case2 .nv-role__c .obv-head{display:flex;align-items:center;gap:10px}
.spro-case2 .nv-role__c .obv-head i{width:10px;height:10px;border-radius:50%;background:var(--sp-black)}
.spro-case2 .nv-role__c--no .obv-head i{background:transparent;border:2px dashed #B9BAC4}
.spro-case2 .nv-role__c ul{list-style:none;margin:0;padding:0}
.spro-case2 .nv-role__c li{padding:10px 0;border-top:1px solid var(--sp-line-soft);display:grid;gap:4px}
.spro-case2 .nv-role__c--yes li b{font:500 22px/1.25 var(--sp-font-display)}
.spro-case2 .nv-role__c--yes li span{font-size:14px;color:var(--sp-muted)}
.spro-case2 .nv-role__c--no li b{font-weight:400;font-size:16px;color:var(--sp-muted)}
.spro-case2 .nv-q__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.spro-case2 .nv-q__list li{border:1px solid var(--sp-line-soft);padding:18px;display:grid;gap:8px;align-content:start}
.spro-case2 .nv-q__list small{font:500 28px/1 var(--sp-font-display);color:var(--sp-red)}
.spro-case2 .nv-q__list b{font:500 20px/1.25 var(--sp-font-display)}
.spro-case2 .nv-q__list span{font-size:15px;color:var(--sp-dark-gray)}
@media (max-width:700px){
  .spro-case2 .nv-scope{grid-template-columns:1fr}
  .spro-case2 .nv-scope .nv-list{order:-1}
  .spro-case2 .nv-phone{justify-self:center}
  .spro-case2 .nv-role__cols,.spro-case2 .nv-q__list{grid-template-columns:1fr}
  .spro-case2 .nv-role__c--yes li b{font-size:20px}
}

/* s204n: rewrite-case components — stat tiles band, desktop-only SVG figures (text list carries labels on phones), text tables */
.spro-case2 .cs-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.spro-case2 .cs-stats .sp-stat__num{display:block;font:500 56px/1 var(--sp-font-display);color:var(--sp-white);margin:14px 0 10px}
.spro-case2 .cs-stats .sp-stat__label{color:var(--sp-white);font-size:16px}
.spro-case2 .cs-stats .sp-stat__sub{color:#B9BAC4;font-size:14px;margin-top:4px}
.spro-case2 .cs-svgfig{margin:28px 0;max-width:640px}
.spro-case2 .cs-svgfig svg{display:block;width:100%;height:auto}
.spro-case2 .cs-table{min-width:0!important;width:100%}
.spro-case2 .cs-table th{font-size:14px;text-transform:none}
.spro-case2 .cs-table td{font-size:15px;vertical-align:top}
.spro-case2 .cs-table td:nth-child(n+3),.spro-case2 .cs-table th:nth-child(n+3){text-align:left;width:auto}
@media (max-width:900px){.spro-case2 .cs-label:empty{display:none}}
@media (max-width:700px){
  .spro-case2 .cs-svgfig{display:none}
  .spro-case2 .cs-stats .sp-stat__num{font-size:44px}
  .spro-case2 .cs-table{min-width:560px!important}
}

/* s204o (designer 586): NCB phone mock finish */
.spro-case2 .nv-phone{margin-top:22px}
.spro-case2 .nv-phone .obv-tag{top:-34px;right:0}
.spro-case2 .nv-act i{display:grid;place-items:center;font-style:normal;font-size:18px;line-height:1;color:var(--sp-white);border-color:#5E6172;background:#24252C}
.spro-case2 .nv-card{background:linear-gradient(135deg,#2F3038 0%,#3A3B44 55%,#4A4B55 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.spro-case2 .nv-card::after{content:"";position:absolute;left:14px;right:60px;top:78px;height:2px;background:rgba(255,255,255,.12);box-shadow:0 8px 0 rgba(255,255,255,.08)}
.spro-case2 .nv-chip{position:absolute;left:14px;top:18px;width:30px;height:22px;border-radius:5px;background:linear-gradient(135deg,#B9BAC4,#8C8D97)}
/* s204q: no orphan step card (3 items -> 3 columns; odd last item spans the row) */
.spro-case2 .cs-steps--text:has(> li:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.spro-case2 .cs-steps--text > li:last-child:nth-child(odd):not(:nth-child(3)){grid-column:1/-1}
@media (max-width:700px){.spro-case2 .cs-steps--text:has(> li:nth-child(3):last-child){grid-template-columns:1fr}}
/* s204r: grid children of the prose column never grow past it (wide tables scroll inside .matrix-wrap on iPhone) */
.spro-case2 .cs-prose > *{min-width:0;max-width:100%}
/* s204s: SVG figures use the full prose column (labels >=12 px at 1440); 5 text steps = 3 + 2 centred */
.spro-case2 .cs-svgfig{max-width:none}
.spro-case2 .cs-steps--text:has(> li:nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
.spro-case2 .cs-steps--text:has(> li:nth-child(5):last-child) > li{grid-column:span 2}
.spro-case2 .cs-steps--text:has(> li:nth-child(5):last-child) > li:nth-child(4){grid-column:2/span 2}
.spro-case2 .cs-steps--text:has(> li:nth-child(5):last-child) > li:nth-child(5){grid-column:4/span 2}
@media (max-width:700px){.spro-case2 .cs-steps--text:has(> li:nth-child(5):last-child){grid-template-columns:1fr}
.spro-case2 .cs-steps--text:has(> li:nth-child(5):last-child) > li,.spro-case2 .cs-steps--text:has(> li:nth-child(5):last-child) > li:nth-child(4),.spro-case2 .cs-steps--text:has(> li:nth-child(5):last-child) > li:nth-child(5){grid-column:auto}}
/* s204t: tables with <=3 columns (.cs-table--stack, td[data-label]) become one card per row on iPhone */
@media (max-width:700px){
  .spro-case2 .cs-table.cs-table--stack{min-width:0!important;width:100%;border:0}
  .spro-case2 .cs-table--stack thead{display:none}
  .spro-case2 .cs-table--stack,.spro-case2 .cs-table--stack tbody,.spro-case2 .cs-table--stack tr,.spro-case2 .cs-table--stack td{display:block;width:auto!important}
  .spro-case2 .cs-table--stack tr{border:1px solid var(--sp-line-soft);background:var(--sp-white);padding:14px 16px;margin:0 0 12px}
  .spro-case2 .cs-table--stack td{border:0!important;padding:4px 0!important;text-align:left!important;font-size:15px}
  .spro-case2 .cs-table--stack td[data-label]::before{content:attr(data-label);display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#747684;margin-bottom:2px}
  .spro-case2 .matrix-wrap:has(.cs-table--stack){overflow:visible}
}
/* s204u: stacked tables keep every column on iPhone (case A's matrix hides column 2 at <=700 px) */
@media (max-width:700px){.spro-case2 .cs-table--stack td:nth-child(2){display:block}}

/* s204v (05.11, HoM 617): 4-item scope card = 2x2 on desktop; phones keep 1 column */
@media (min-width:701px){.spro-case2 .obv-roles--4 .obv-roles__list{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* s204w (05.11, HoM 617 designer minor): scope-card caption one step larger and darker; flow card full width when outside cs-prose */
.spro-case2 .obv-roles--4 .obv-cap{font-size:15px;color:var(--sp-graphite)}