/* Final Swiss layout audit layer. Loaded after theme-flat.css on purpose. */

/* Top navigation: a full-bleed glass bar, aligned with the scenic-assistant
   reference while preserving this deck's own navigation content. */
.nav{
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: none !important;
  overflow: hidden;
  transform: none !important;
  translate: none !important;
  isolation: isolate;
  box-sizing: border-box;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
  border-left: 0 !important;
  padding: 6px clamp(24px, 5vw, 88px) !important;
  border-radius: 0 !important;
  background: linear-gradient(112deg, rgba(22,27,24,.76), rgba(8,12,10,.58) 48%, rgba(12,19,15,.70)) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(255,255,255,.035),
    0 18px 44px -28px rgba(0,0,0,.95),
    0 8px 24px -18px rgba(2,157,76,.36) !important;
}
.nav::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 82% 125%, rgba(2,157,76,.17), transparent 38%),
    radial-gradient(ellipse at 14% -70%, rgba(255,255,255,.08), transparent 34%);
  opacity:.78;
}
.nav::after{
  content:"";
  position:absolute;
  top:0;
  right:10%;
  left:10%;
  z-index:0;
  height:1px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), rgba(61,236,107,.22), transparent);
}
.nav > *{
  position:relative;
  z-index:1;
}
.nav-logo{
  padding-right: 14px !important;
  padding-left: 14px !important;
}
.nav-chapters{
  gap: 2px;
  padding: 0 !important;
}
.nav-chapters a,
.lang-switch button{
  min-height: 36px;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: color .18s ease, background-color .18s ease !important;
}
.nav-chapters a:hover,
.lang-switch button:hover{
  background: rgba(255,255,255,.045) !important;
}
.lang-switch{
  gap: 2px !important;
  margin-right: 4px !important;
  padding: 0 0 0 10px !important;
  border: 0 !important;
  border-left: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
/* The visual editor may persist its canvas drag as an inline transform.
   Compensate only while that exact legacy value exists; clean markup keeps the
   normal translateX centring above. */
.nav[style*="translate(-718.5px"]{
  translate: none !important;
}
.nav-chapters a.active,
.lang-switch button[aria-pressed="true"]{
  color: #e9fff0 !important;
  background: rgba(2,157,76,.20) !important;
  box-shadow: inset 0 0 0 1px rgba(61,236,107,.13) !important;
}

@media (max-width: 767px){
  .nav{
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    transform: none !important;
    translate: none;
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    padding-right: 8px !important;
    padding-left: 8px !important;
    border-radius: 0 !important;
  }
  .nav[style*="translate(-718.5px"]{
    translate: 718.5px 0;
  }
}

:root{
  --swiss-accent: #029D4C !important;
  --swiss-accent-on: #0a0a0a !important;
  --green: #029D4C !important;
  --green-bright: #029D4C !important;
  --green-dim: rgba(2,157,76,.12) !important;
  --green-glow: rgba(2,157,76,.22) !important;
}

#sec-effect + #sec-effect-service{
  margin-top: 0 !important;
}

/* S01: centre the typographic group and keep it on the deck's left axis. */
#cover.swiss-accent{
  align-content: center !important;
  row-gap: clamp(24px, 4vh, 48px) !important;
  padding-top: clamp(104px, 12vh, 156px) !important;
  padding-bottom: clamp(80px, 10vh, 132px) !important;
}
#cover .hero-title{
  justify-self: start !important;
  align-self: end !important;
}
#cover::after{ margin-top: 0 !important; }

/* S16 main evidence: portrait media cannot vertically centre short copy. */
#sec-effect-service .service-primary-demo{
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#sec-effect-service .service-primary-demo .service-result-head{
  margin: 0 !important;
}
#sec-effect-service .service-primary-demo #benefits-journey-demo{
  margin: clamp(20px, 2.2vw, 28px) 0 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#benefits-journey-demo .phone-row.reverse{
  grid-template-columns: minmax(0, 1fr) minmax(248px, 300px) !important;
  gap: clamp(32px, 5vw, 72px) !important;
  align-items: start !important;
}
#benefits-journey-demo .demo-body{
  align-self: start !important;
  max-width: 44rem !important;
  padding-top: 0 !important;
}
#benefits-journey-demo .phone-col{
  display: flex !important;
  width: 100% !important;
  height: auto !important;
  align-items: flex-start !important;
  justify-content: flex-end !important;
}
#benefits-journey-demo .phone-frame{
  width: min(100%, clamp(216px, 16vw, 248px)) !important;
  max-width: none !important;
  height: auto !important;
}
#benefits-journey-demo .demo-desc{
  max-width: 42rem !important;
}
/* S11: all six stages remain visible without a horizontal discovery trap. */
#sec-process .process-list{
  margin-top: var(--r-block, 72px) !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  overflow: visible !important;
  scroll-snap-type: none !important;
}
#sec-process .process-item{ min-height: 0 !important; }

/* Top-align other copy/media pairs that used the same blank-space mechanism. */
#sec-effect-service .service-shooting-body,
#sec-cost .cost-ai-pipeline-intro,
#sec-cost .cost-side-copy{
  justify-content: flex-start !important;
}
#sec-cost .cost-ai-pipeline-intro{
  gap: clamp(24px, 3vw, 40px) !important;
}

/* Straight, solid presentation surfaces. Physical phones and circular system
   orbits remain deliberate semantic exceptions. */
#sec-effect-service .ai-story-collage,
#sec-effect-service .ai-story-proof,
#sec-effect-service .service-ai-output,
#sec-effect-service .service-ai-qa,
#sec-effect-service .service-shooting-body,
#sec-effect-service .service-shooting-photo-grid,
#sec-effect-service .service-shooting-takeaway,
#sec-effect-service .service-shooting-cost-reference,
#sec-process .period-milestones,
#sec-cost .cost-tier-media,
#sec-cost .cost-tier-name,
#sec-cost .cost-tier-price,
#sec-cost .cost-side-media-label,
#sec-cost .cost-tier-media-label,
#sec-input .tpl-btn,
#sec-input .tpl-btn-icon{
  border-radius: 0 !important;
  box-shadow: none !important;
}
#sec-cost .cost-side.has-media,
#sec-cost .cost-side-copy,
#sec-cost .cost-tier-price,
#sec-input .integration-card,
#sec-input .tpl-btn{
  background-image: none !important;
}
#sec-cost .cost-tier-price{
  border: 0 !important;
  border-top: 1px solid currentColor !important;
  background-color: transparent !important;
}
#sec-cost .cost-tier.recommended .cost-tier-price{
  color: var(--swiss-accent) !important;
  border-top-color: var(--swiss-accent) !important;
}

/* #029D4C is an anchor, not a canvas. Large presentation surfaces stay
   neutral; the accent is limited to rules, labels, numbers and actions. */
#sec-capability .capability-board .capability-patent,
#sec-capability .dual-growth-hub,
#sec-effect-service .effect-bridge,
#sec-process .period-card-reference,
#sec-cost .cost-tier.recommended{
  background: var(--swiss-dark-card) !important;
  background-image: none !important;
  color: var(--swiss-paper) !important;
  box-shadow: none !important;
}
#sec-capability .capability-board .capability-patent,
#sec-effect-service .effect-bridge,
#sec-process .period-card-reference,
#sec-cost .cost-tier.recommended{
  border-top: 2px solid var(--swiss-accent) !important;
}
#sec-capability .dual-growth-hub{
  border: 1px solid var(--swiss-accent) !important;
}
#sec-capability .capability-patent-title,
#sec-capability .dual-growth-hub strong,
#sec-effect-service .effect-bridge strong,
#sec-process .period-name,
#sec-process .period-milestone strong,
#sec-cost .cost-tier.recommended .cost-tier-name,
#sec-cost .cost-tier.recommended .cost-tier-media-label{
  color: var(--swiss-paper) !important;
}
#sec-capability .dual-growth-hub small,
#sec-effect-service .effect-bridge p,
#sec-effect-service .effect-bridge small,
#sec-process .period-milestone span,
#sec-process .period-caveat,
#sec-cost .cost-tier.recommended .cost-tier-positioning,
#sec-cost .cost-tier.recommended .cost-tier-feature{
  color: #a8a8a4 !important;
}
#sec-capability .capability-patent-link{
  border-color: var(--swiss-accent) !important;
  background: transparent !important;
  color: var(--swiss-accent) !important;
}
#sec-capability .dual-growth-hub-status{
  background-color: var(--swiss-accent) !important;
}
#sec-process .period-card-reference .period-tier{
  color: var(--swiss-accent) !important;
  background: transparent !important;
}
#sec-effect-service .effect-bridge > span,
#sec-process .period-card-reference .period-duration,
#sec-cost .cost-tier.recommended .cost-tier-price{
  color: var(--swiss-accent) !important;
  border: 0 !important;
  border-top: 1px solid var(--swiss-accent) !important;
}
#sec-process .period-card-reference .period-duration span{
  color: #a8a8a4 !important;
}
#sec-process .period-card-reference .period-caveat{
  color: #a8a8a4 !important;
}

@media (max-width: 1199px){
  #sec-process .process-list{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* A 995px presentation canvas still has room for these comparison grids. */
@media (min-width: 900px) and (max-width: 1023px){
  #sec-effect-service .service-story-flow{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  #sec-cost .service-shooting-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #sec-cost .cost-tiers{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 899px){
  #sec-effect-service .service-primary-demo{
    padding: 0 !important;
  }
  #benefits-journey-demo .phone-row.reverse{
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 32px !important;
  }
  #benefits-journey-demo .demo-body{
    max-width: 42rem !important;
  }
  #benefits-journey-demo .phone-col{
    justify-content: center !important;
  }
  #benefits-journey-demo .phone-frame{
    width: min(100%, 240px) !important;
  }
}

@media (max-width: 639px){
  #cover.swiss-accent{
    row-gap: 28px !important;
    padding-top: 96px !important;
    padding-bottom: 72px !important;
  }
  #sec-effect-service .service-primary-demo{ padding: 0 !important; }
  #benefits-journey-demo .demo-link-row{ align-items: stretch !important; }
  #sec-process .process-list{
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ============================================================
   08.29 USER REVIEW PASS
   01 capability follows the current main-worktree composition.
   02.2 is recast as two explicit airline-benefit cases.
   03 uses an S02-inspired reference + vertical delivery ledger.
   ============================================================ */

/* 01 CAPABILITY · restore the main-worktree dual-wheel treatment. */
#sec-capability .dual-wheel-block{
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  isolation: isolate !important;
  overflow: hidden !important;
  margin-top: clamp(40px,5vw,72px) !important;
  padding: clamp(30px,4vw,56px) !important;
  border: 1px solid rgba(2,157,76,.16) !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 50% 58%,rgba(2,157,76,.085),transparent 31%),
    linear-gradient(145deg,rgba(255,255,255,.042),rgba(5,9,6,.84) 46%,rgba(2,157,76,.025)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055),0 28px 80px -52px rgba(0,0,0,.9) !important;
}
#sec-capability .dual-wheel-block::before{
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  height: auto !important;
  opacity: .3 !important;
  background-image:
    linear-gradient(rgba(2,157,76,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(2,157,76,.08) 1px,transparent 1px) !important;
  background-size: 56px 56px !important;
  mask-image: radial-gradient(circle at 50% 55%,#000,transparent 70%) !important;
  -webkit-mask-image: radial-gradient(circle at 50% 55%,#000,transparent 70%) !important;
}
#sec-capability .dual-growth-track{
  min-height: 438px !important;
  padding: clamp(22px,2.4vw,32px) !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 20px !important;
  background: linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.014) 58%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
#sec-capability .dual-growth-track.is-profit{
  color: var(--swiss-accent) !important;
  border-color: rgba(2,157,76,.24) !important;
  background: linear-gradient(155deg,rgba(2,157,76,.075),rgba(255,255,255,.014) 58%) !important;
}
#sec-capability .dual-growth-track.is-brand{
  color: var(--wheel-brand) !important;
  border-color: rgba(129,120,255,.28) !important;
  background: linear-gradient(155deg,rgba(129,120,255,.065),rgba(255,255,255,.014) 58%) !important;
}
#sec-capability .dual-growth-track-copy h4,
#sec-capability .dual-growth-steps strong{
  color: var(--ink) !important;
}
#sec-capability .dual-growth-track-copy p{
  color: var(--ink-2) !important;
}
#sec-capability .dual-growth-steps li{
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 10px !important;
  background: rgba(0,0,0,.16) !important;
  box-shadow: none !important;
}
#sec-capability .dual-growth-core{
  min-height: 438px !important;
  border: 1px solid rgba(2,157,76,.13) !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at center,rgba(2,157,76,.085),transparent 40%),
    rgba(3,7,4,.64) !important;
  box-shadow: none !important;
}
#sec-capability .dual-growth-core::before,
#sec-capability .dual-growth-core::after{
  background: linear-gradient(90deg,transparent,rgba(2,157,76,.52)) !important;
}
#sec-capability .dual-growth-orbit{
  border-color: rgba(2,157,76,.28) !important;
}
#sec-capability .dual-growth-orbit::after{
  background: var(--swiss-accent) !important;
  box-shadow: 0 0 18px rgba(2,157,76,.72) !important;
}
#sec-capability .dual-growth-orbit.is-brand-orbit{
  border-color: rgba(129,120,255,.34) !important;
}
#sec-capability .dual-growth-orbit.is-brand-orbit::after{
  background: var(--wheel-brand) !important;
  box-shadow: 0 0 18px rgba(129,120,255,.72) !important;
}
#sec-capability .dual-growth-hub{
  border: 1px solid rgba(2,157,76,.34) !important;
  border-radius: 18px !important;
  background: rgba(5,10,6,.92) !important;
  background-image: none !important;
  box-shadow: 0 24px 70px -36px rgba(2,157,76,.6),inset 0 1px 0 rgba(255,255,255,.06) !important;
}
#sec-capability .dual-growth-hub strong{ color: var(--ink) !important; }
#sec-capability .dual-growth-hub small{ color: var(--ink-3) !important; }
#sec-capability .dual-growth-hub-status{
  background: var(--swiss-accent) !important;
  box-shadow: 0 0 14px rgba(2,157,76,.84) !important;
}
#sec-capability .dual-growth-core-node{
  border-radius: 999px !important;
  background: rgba(4,9,5,.9) !important;
  box-shadow: none !important;
}
#sec-capability .dual-wheel-conclusion{
  border: 1px solid rgba(2,157,76,.16) !important;
  border-radius: 14px !important;
  background: rgba(2,157,76,.045) !important;
  box-shadow: none !important;
}
#sec-capability .dual-wheel-conclusion strong{ color: var(--swiss-accent) !important; }
#sec-capability .dual-wheel-conclusion span{ color: var(--ink-3) !important; }

/* 02.2 AIRLINE BENEFITS · two cases, one calm editorial system. */
#sec-effect-service .ai-story{
  margin-top: 56px !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--swiss-dark-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#sec-effect-service .ai-story-head{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(440px,.9fr) !important;
  gap: 48px !important;
  align-items: end !important;
  padding: 32px 0 0 !important;
}
#sec-effect-service .ai-story-title{
  max-width: 18ch !important;
}
#sec-effect-service .ai-story-tabs{
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  width: 100% !important;
  gap: 1px !important;
  padding: 1px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--swiss-dark-rule) !important;
}
#sec-effect-service .ai-story-tab{
  display: flex !important;
  min-height: 92px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 18px 20px !important;
  border: 0 !important;
  border-top: 2px solid transparent !important;
  border-radius: 0 !important;
  background: #101010 !important;
  color: #a8a8a4 !important;
  text-align: left !important;
  box-shadow: none !important;
}
#sec-effect-service .ai-story-tab[aria-selected="true"]{
  border-top-color: var(--swiss-accent) !important;
  background: #181818 !important;
  color: var(--swiss-paper) !important;
}
#sec-effect-service .ai-story-tab-index{
  color: var(--swiss-accent) !important;
  font-family: var(--mono) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .11em !important;
}
#sec-effect-service .ai-story-tab-name{
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
}
#sec-effect-service .ai-story-panel{
  margin-top: 32px !important;
}
#sec-effect-service .ai-story-case-note{
  margin: 0 0 24px !important;
  padding: 0 0 0 16px !important;
  border: 0 !important;
  border-left: 2px solid var(--swiss-accent) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #bdbdb8 !important;
}
#sec-effect-service .ai-story-grid{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 48px minmax(0,1fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
}
#sec-effect-service .ai-story-stage{
  display: grid !important;
  grid-template-rows: auto auto auto !important;
  align-content: start !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--swiss-dark-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#sec-effect-service .ai-story-stage-head{
  min-height: 58px !important;
  padding: 16px 0 !important;
  border: 0 !important;
}
#sec-effect-service .ai-story-surface{
  height: clamp(320px,34vw,520px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #080808 !important;
  box-shadow: none !important;
}
#sec-effect-service .ai-story-collage,
#sec-effect-service .ai-story-collage img,
#sec-effect-service .ai-story-video{
  border-radius: 0 !important;
  box-shadow: none !important;
}
#sec-effect-service .ai-story-cap{
  min-height: 118px !important;
  padding: 20px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--swiss-dark-rule) !important;
}
#sec-effect-service .ai-story-connector{
  position: relative !important;
  min-height: 100% !important;
}
#sec-effect-service .ai-story-connector::before{
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 10px !important;
  right: 10px !important;
  height: 1px !important;
  background: var(--swiss-dark-rule) !important;
}
#sec-effect-service .ai-story-connector::after{
  content: "→" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%,-50%) !important;
  padding: 8px !important;
  background: var(--swiss-bg) !important;
  color: var(--swiss-accent) !important;
  font-family: var(--mono) !important;
  font-size: 18px !important;
}
#sec-effect-service .ai-story-proof{
  margin-top: 28px !important;
  padding: 20px 0 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--swiss-dark-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
#sec-effect-service .ai-story-online-link{
  display: inline-flex !important;
  width: max-content !important;
  margin-top: 14px !important;
  padding-bottom: 4px !important;
  border-bottom: 1px solid var(--swiss-accent) !important;
  color: var(--swiss-accent) !important;
  font-family: var(--mono) !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-decoration: none !important;
}

/* 03 CYCLE · one reference block, three scope bands, six-stage ledger. */
#sec-process{
  --process-rule: rgba(255,255,255,.13);
  --process-muted: #a8a8a4;
}
#sec-process .process-overview{
  display: grid !important;
  grid-template-columns: minmax(0,1.22fr) minmax(360px,.78fr) !important;
  gap: 1px !important;
  margin-top: var(--r-title, 24px) !important;
  border: 0 !important;
  background: var(--process-rule) !important;
}
/* Rows size to their content. The previous 430px floor was set for a
   108px numeral; at the normalized figure size it left a large void. */
#sec-process .process-reference{
  display: grid !important;
  grid-template-rows: auto auto auto auto !important;
  gap: 32px !important;
  padding: 32px !important;
  border: 1px solid var(--process-rule) !important;
  border-top: 2px solid var(--swiss-accent) !important;
  border-radius: 18px !important;
  background: #101010 !important;
  color: var(--swiss-paper) !important;
  box-shadow: none !important;
}
#sec-process .process-reference-meta{
  color: var(--swiss-accent) !important;
  font-family: var(--mono) !important;
}
#sec-process .process-reference-main{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(250px,.8fr) !important;
  gap: 40px !important;
  align-items: center !important;
}
#sec-process .process-reference-duration{
  color: var(--swiss-paper) !important;
  font-family: var(--sans) !important;
  white-space: nowrap !important;
}
#sec-process .process-reference-duration span{
  margin-left: .24em !important;
  color: var(--process-muted) !important;
}
#sec-process .process-reference-main p{
  color: var(--process-muted) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.62 !important;
}

/* The headline figure is the whole engagement, so the two parts that make
   it up sit next to it as an equation rather than as separate stats. */
#sec-process .process-reference-split{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) !important;
  align-items: start !important;
  gap: 20px !important;
  padding-left: 40px !important;
  border-left: 1px solid var(--process-rule) !important;
}
#sec-process .process-split-item{
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  gap: 6px !important;
}
#sec-process .process-split-label{
  color: var(--swiss-accent) !important;
  font-family: var(--mono) !important;
  letter-spacing: .08em !important;
}
#sec-process .process-split-value{
  color: var(--swiss-paper) !important;
  white-space: nowrap !important;
}
#sec-process .process-split-note{
  color: var(--process-muted) !important;
  line-height: 1.5 !important;
}
/* Sits on the row of the two figures rather than centred against the
   whole column, whose height varies with the caption's line count. */
#sec-process .process-split-plus{
  align-self: start !important;
  margin-top: 22px !important;
  color: var(--process-muted) !important;
  font-family: var(--sans) !important;
  line-height: 1 !important;
}

/* Marks the milestone row as detailing the production half only, so it is
   not misread as a breakdown of the full 3-4 month figure. */
#sec-process .process-milestones-label{
  margin-bottom: -12px !important;
  color: var(--process-muted) !important;
  font-family: var(--mono) !important;
  letter-spacing: .08em !important;
}
#sec-process .process-reference-milestones{
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  align-self: end !important;
  border-top: 1px solid var(--process-rule) !important;
}
#sec-process .process-reference-milestones > div{
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding: 20px 18px 0 !important;
  border-left: 1px solid var(--process-rule) !important;
}
#sec-process .process-reference-milestones > div:first-child{
  padding-left: 0 !important;
  border-left: 0 !important;
}
#sec-process .process-reference-milestones span{
  color: var(--process-muted) !important;
  font-weight: 600 !important;
}
#sec-process .process-reference-milestones strong{
  color: var(--swiss-paper) !important;
  font-weight: 500 !important;
}
#sec-process .process-scopes{
  display: grid !important;
  grid-template-rows: repeat(3,minmax(0,1fr)) !important;
  gap: 1px !important;
  min-width: 0 !important;
  background: var(--process-rule) !important;
}
#sec-process .process-scopes .period-card{
  display: grid !important;
  grid-template-columns: minmax(120px,.55fr) auto minmax(0,1fr) !important;
  gap: 22px !important;
  align-items: center !important;
  min-height: 0 !important;
  padding: 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #151515 !important;
  box-shadow: none !important;
}
#sec-process .period-card-heading{
  align-self: stretch !important;
  justify-content: space-between !important;
}
#sec-process .period-tier{
  color: var(--swiss-accent) !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
#sec-process .period-name{
  color: var(--swiss-paper) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
}
#sec-process .process-scopes .period-duration{
  min-width: 94px !important;
  color: var(--swiss-paper) !important;
  white-space: nowrap !important;
}
#sec-process .process-scopes .period-duration span{
  color: var(--process-muted) !important;
}
#sec-process .process-scopes .period-desc{
  color: var(--process-muted) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}
/* The hairline is a divider between the overview and the step list, not a
   block of its own. It carries a half block gap on each side so the pair
   reads as one break of --r-block rather than two stacked margins. */
#sec-process > .hairline{
  display: block !important;
  height: 1px !important;
  margin: var(--r-block, 72px) 0 0 !important;
  background: var(--process-rule) !important;
}
/* The step rail is drawn once on the list rather than per row. Drawing it
   on each row left a 1px seam at every boundary and could not reach the
   first and last edges, so the line read as six fragments. */
#sec-process .process-list{
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
#sec-process .process-list::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 72px !important;
  width: 1px !important;
  background: var(--process-rule) !important;
  pointer-events: none !important;
}
#sec-process .process-item{
  display: grid !important;
  grid-template-columns: 72px minmax(0,1fr) !important;
  min-height: 138px !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--process-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
#sec-process .process-num{
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}
/* Superseded by the single rail on .process-list above. */
#sec-process .process-num::after{
  content: none !important;
}
#sec-process .process-step-index{
  color: var(--process-muted) !important;
  font-family: var(--mono) !important;
}
#sec-process .process-dot{
  width: 8px !important;
  height: 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #737373 !important;
  box-shadow: none !important;
}
#sec-process .process-dot.green{ background: var(--swiss-accent) !important; }
#sec-process .process-body{
  display: grid !important;
  grid-template-columns: 150px minmax(180px,1.05fr) minmax(300px,1.75fr) minmax(170px,.8fr) !important;
  gap: 28px !important;
  align-items: center !important;
  min-width: 0 !important;
  padding: 24px 0 24px 28px !important;
}
#sec-process .process-owner{
  width: max-content !important;
  max-width: 100% !important;
  padding: 6px 9px !important;
  border: 1px solid var(--process-rule) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--process-muted) !important;
  font-weight: 600 !important;
}
#sec-process .process-title{
  color: var(--swiss-paper) !important;
}
#sec-process .process-desc,
#sec-process .process-out{
  margin: 0 !important;
  color: var(--process-muted) !important;
}
/* The outcome column already reads as a separate column through the grid
   gap and its arrow glyph; the extra divider only added visual noise. */
#sec-process .process-out{
  padding-left: 0 !important;
  border-left: 0 !important;
  color: var(--swiss-paper) !important;
}

/* The list closes on the section's own spacing, so the final row does not
   need a bottom rule under it. */
#sec-process .process-item:last-child{
  border-bottom: 0 !important;
}

@media (max-width: 1199px){
  #sec-effect-service .ai-story-head{
    grid-template-columns: minmax(0,1fr) minmax(380px,.9fr) !important;
    gap: 32px !important;
  }
  #sec-process .process-overview{
    grid-template-columns: minmax(0,1fr) !important;
  }
  #sec-process .process-scopes{
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    grid-template-rows: auto !important;
  }
  #sec-process .process-scopes .period-card{
    grid-template-columns: minmax(0,1fr) !important;
    align-content: start !important;
  }
  #sec-process .process-body{
    grid-template-columns: 132px minmax(180px,1fr) minmax(0,1.5fr) !important;
  }
  #sec-process .process-out{
    grid-column: 2 / -1 !important;
    padding: 10px 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid var(--process-rule) !important;
  }
}

@media (max-width: 899px){
  #sec-effect-service .ai-story-head{
    grid-template-columns: minmax(0,1fr) !important;
  }
  #sec-effect-service .ai-story-grid{
    grid-template-columns: minmax(0,1fr) !important;
    gap: 28px !important;
  }
  #sec-effect-service .ai-story-connector{
    min-height: 32px !important;
  }
  #sec-effect-service .ai-story-connector::before{
    top: 0 !important;
    bottom: 0 !important;
    left: 50% !important;
    right: auto !important;
    width: 1px !important;
    height: auto !important;
  }
  #sec-effect-service .ai-story-connector::after{
    content: "↓" !important;
  }
  #sec-process .process-reference-main{
    grid-template-columns: minmax(0,1fr) !important;
  }
  #sec-process .process-reference-milestones{
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 22px 0 !important;
  }
  #sec-process .process-scopes{
    grid-template-columns: minmax(0,1fr) !important;
  }
  #sec-process .process-body{
    grid-template-columns: minmax(0,1fr) !important;
    gap: 14px !important;
  }
  #sec-process .process-out{
    grid-column: auto !important;
  }
}

@media (max-width: 639px){
  #sec-capability .dual-wheel-block{
    padding: 20px !important;
    border-radius: 22px !important;
  }
  #sec-effect-service .ai-story-tabs{
    grid-template-columns: minmax(0,1fr) !important;
  }
  #sec-effect-service .ai-story-surface{
    height: min(78vw,440px) !important;
  }
  #sec-process .process-reference{
    min-height: 0 !important;
    padding: 24px 20px !important;
  }
  #sec-process .process-reference-milestones{
    grid-template-columns: minmax(0,1fr) !important;
  }
  #sec-process .process-reference-milestones > div{
    padding: 14px 0 0 !important;
    border-left: 0 !important;
  }
  #sec-process .process-item{
    grid-template-columns: 48px minmax(0,1fr) !important;
  }
  #sec-process .process-body{
    padding-left: 18px !important;
  }
}

/* 02.2 AI STORY FILM · static airline images become one cinematic service story. */
#sec-effect-service #effect-service{
  height: auto !important;
}
#sec-effect-service #aiStory{
  margin-top: 72px !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
#sec-effect-service #aiStory .ai-story-head{
  display: grid !important;
  grid-template-columns: minmax(0,1.12fr) minmax(360px,.88fr) !important;
  gap: clamp(40px,6vw,88px) !important;
  align-items: end !important;
  padding: 0 0 32px !important;
  border-bottom: 1px solid rgba(242,244,239,.16) !important;
}
#sec-effect-service #aiStory .ai-story-intro{
  display: grid !important;
  gap: 14px !important;
}
#sec-effect-service #aiStory .ai-story-kicker{
  color: var(--swiss-accent) !important;
  font-family: var(--mono) !important;
}
#sec-effect-service #aiStory .ai-story-title{
  width: auto !important;
  max-width: 15ch !important;
  transform: none !important;
  color: var(--swiss-paper) !important;
  text-align: left !important;
}
#sec-effect-service #aiStory .ai-story-desc{
  max-width: 38em !important;
  margin: 0 !important;
  color: #aaaDA7 !important;
  text-align: left !important;
}
#sec-effect-service #aiStoryLounge{
  margin-top: 0 !important;
  text-align: left !important;
}
#sec-effect-service #effect-service > #aiStory #aiStoryLounge > .ai-story-grid.ai-story-cinematic{
  display: grid !important;
  grid-template-columns: minmax(248px,.64fr) 104px minmax(0,1.5fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
}
#sec-effect-service #aiStory .ai-story-stage{
  min-width: 0 !important;
  border-top: 0 !important;
}
#sec-effect-service #aiStory .ai-story-stage-head{
  display: flex !important;
  width: 100% !important;
  min-height: 62px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 !important;
  transform: none !important;
  border-bottom: 1px solid rgba(242,244,239,.16) !important;
}
#sec-effect-service #aiStory .ai-story-stage-index{
  color: var(--swiss-accent) !important;
  font-family: var(--mono) !important;
}
#sec-effect-service #aiStory .ai-story-stage-label{
  color: var(--swiss-paper) !important;
}
#sec-effect-service #aiStory .ai-story-result-meta{
  margin-left: auto !important;
  color: #777a75 !important;
  font-family: var(--mono) !important;
}
#sec-effect-service #aiStory .ai-story-filmstrip{
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  grid-template-rows: repeat(2,minmax(0,1fr)) !important;
  gap: 8px !important;
  height: 520px !important;
  padding: 12px !important;
  background: #0a0b0a !important;
}
#sec-effect-service #aiStory .ai-story-filmstrip figure{
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  background: #141514 !important;
}
#sec-effect-service #aiStory .ai-story-filmstrip img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  filter: saturate(.62) brightness(.72) !important;
  transform: scale(1.02) !important;
}
#sec-effect-service #aiStory .ai-story-filmstrip figcaption{
  position: absolute !important;
  left: 8px !important;
  bottom: 8px !important;
  padding: 4px 6px !important;
  color: #d9dbd5 !important;
  background: rgba(5,7,6,.78) !important;
  font-weight: 550 !important;
  line-height: 1 !important;
}
#sec-effect-service #aiStory .ai-story-ai-bridge{
  display: grid !important;
  min-height: 520px !important;
  place-content: center !important;
  gap: 22px !important;
  padding: 62px 12px 0 !important;
  text-align: center !important;
}
#sec-effect-service #aiStory .ai-story-ai-bridge::before{
  top: 62px !important;
  bottom: 118px !important;
  left: 50% !important;
  right: auto !important;
  width: 1px !important;
  height: auto !important;
  background: rgba(61,236,107,.34) !important;
}
#sec-effect-service #aiStory .ai-story-ai-bridge::after{
  content: "" !important;
  display: none !important;
}
#sec-effect-service #aiStory .ai-story-ai-mark{
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  width: 48px !important;
  height: 48px !important;
  place-items: center !important;
  margin: 0 auto !important;
  border: 1px solid rgba(61,236,107,.72) !important;
  border-radius: 50% !important;
  color: #071009 !important;
  background: var(--swiss-accent) !important;
  font-family: var(--mono) !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  box-shadow: 0 0 0 8px var(--swiss-bg) !important;
}
#sec-effect-service #aiStory .ai-story-ai-bridge ol{
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
#sec-effect-service #aiStory .ai-story-ai-bridge li{
  padding: 5px 7px !important;
  color: #9da19a !important;
  background: var(--swiss-bg) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}
#sec-effect-service #aiStory .ai-story-cinema{
  position: relative !important;
  height: 520px !important;
  overflow: hidden !important;
  background: #090a09 !important;
}
#sec-effect-service #aiStory .ai-story-cinema .ai-story-video{
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  object-fit: cover !important;
}
#sec-effect-service #aiStory .ai-story-cinema::after{
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg,rgba(4,6,4,.02) 45%,rgba(4,6,4,.86) 100%) !important;
}
#sec-effect-service #aiStory .ai-story-cinema-overlay{
  position: absolute !important;
  z-index: 2 !important;
  left: 24px !important;
  right: 24px !important;
  bottom: 54px !important;
  display: grid !important;
  gap: 7px !important;
  color: #f0f2ed !important;
}
#sec-effect-service #aiStory .ai-story-cinema-overlay span{
  color: var(--swiss-accent) !important;
  font-weight: 600 !important;
}
#sec-effect-service #aiStory .ai-story-cinema-overlay b{
  max-width: 16em !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: -.02em !important;
}
#sec-effect-service #aiStory .ai-story-progress{
  position: absolute !important;
  z-index: 3 !important;
  right: 20px !important;
  bottom: 22px !important;
  display: flex !important;
  gap: 14px !important;
  color: rgba(239,242,235,.62) !important;
  font-size: 11px !important;
}
#sec-effect-service #aiStory .ai-story-progress span{
  position: relative !important;
  padding-top: 8px !important;
}
#sec-effect-service #aiStory .ai-story-progress span::before{
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background: rgba(239,242,235,.28) !important;
}
#sec-effect-service #aiStory .ai-story-progress .is-active{
  color: var(--swiss-paper) !important;
}
#sec-effect-service #aiStory .ai-story-progress .is-active::before{
  background: var(--swiss-accent) !important;
}
#sec-effect-service #aiStory .ai-story-cap{
  min-height: 112px !important;
  padding: 18px 0 0 !important;
  border-top: 1px solid rgba(242,244,239,.16) !important;
  text-align: left !important;
}
#sec-effect-service #aiStory .ai-story-cap-title{
  color: var(--swiss-paper) !important;
  text-align: left !important;
}
#sec-effect-service #aiStory .ai-story-cap-sub{
  margin-top: 7px !important;
  color: #8f938c !important;
  text-align: left !important;
}
#sec-effect-service #aiStory .ai-story-result-cap{
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 24px !important;
}
#sec-effect-service #aiStory .ai-story-emotion-tag{
  flex: 0 0 auto !important;
  padding: 8px 10px !important;
  color: var(--swiss-accent) !important;
  background: rgba(61,236,107,.08) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
}

@media (max-width: 899px){
  #sec-effect-service #aiStory .ai-story-head{
    grid-template-columns: minmax(0,1fr) !important;
    gap: 20px !important;
  }
  #sec-effect-service #aiStory .ai-story-title{
    max-width: 18ch !important;
  }
  #sec-effect-service #effect-service > #aiStory #aiStoryLounge > .ai-story-grid.ai-story-cinematic{
    grid-template-columns: minmax(0,1fr) !important;
    gap: 0 !important;
  }
  #sec-effect-service #aiStory .ai-story-filmstrip{
    height: min(78vw,480px) !important;
  }
  #sec-effect-service #aiStory .ai-story-ai-bridge{
    grid-template-columns: auto 1fr !important;
    min-height: 92px !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px 0 !important;
  }
  #sec-effect-service #aiStory .ai-story-ai-bridge::before{
    top: 50% !important;
    bottom: auto !important;
    left: 24px !important;
    right: 0 !important;
    width: auto !important;
    height: 1px !important;
  }
  #sec-effect-service #aiStory .ai-story-ai-bridge ol{
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
    gap: 6px !important;
  }
  #sec-effect-service #aiStory .ai-story-ai-bridge li{
    text-align: center !important;
  }
  #sec-effect-service #aiStory .ai-story-cinema{
    height: min(92vw,560px) !important;
  }
}

@media (max-width: 639px){
  #sec-effect-service #aiStory{
    margin-top: 56px !important;
  }
  #sec-effect-service #aiStory .ai-story-head{
    padding-bottom: 24px !important;
  }
  #sec-effect-service #aiStory .ai-story-result-meta{
    display: none !important;
  }
  #sec-effect-service #aiStory .ai-story-filmstrip{
    height: 108vw !important;
    max-height: 480px !important;
  }
  #sec-effect-service #aiStory .ai-story-cinema{
    height: 118vw !important;
    max-height: 560px !important;
  }
  #sec-effect-service #aiStory .ai-story-cinema-overlay{
    left: 18px !important;
    right: 18px !important;
    bottom: 76px !important;
  }
  #sec-effect-service #aiStory .ai-story-progress{
    left: 18px !important;
    right: 18px !important;
    justify-content: space-between !important;
  }
  #sec-effect-service #aiStory .ai-story-result-cap{
    display: grid !important;
  }
  #sec-effect-service #aiStory .ai-story-emotion-tag{
    width: max-content !important;
  }
}

/* 08.29 TYPOGRAPHY NORMALIZATION
   One compact hierarchy for the vertical review deck. Data/KPI numerals keep
   their own display scale; narrative copy no longer competes with headings. */
:root{
  --deck-type-h1: clamp(52px, 6.4vw, 68px);
  --deck-type-h2: clamp(34px, 4.2vw, 46px);
  --deck-type-h3: clamp(22px, 2.6vw, 30px);
  --deck-type-card: 18px;
  --deck-type-lead: 15px;
  --deck-type-body: 14px;
  --deck-type-small: 13px;
  --deck-type-label: 12px;
}

main > section:not(#cover) > .section-title{
  max-width: 36ch !important;
}

#sec-input .integration-card h3,
#sec-input .delivery-spec h3,
#sec-input .integration-phase strong{
  line-height: 1.4 !important;
}

/* Keep the introductory claim separate from its fact list in both return
   material cards, so the same reading rhythm carries across the pair. */
#sec-input .integration-content-grid .integration-card-lead{
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--swiss-dark-rule, rgba(255,255,255,.16)) !important;
}

/* 02.2 PRIMARY DEMO · remove the explanatory sidecar and let the product
   demonstration become the single visual focus. */
#sec-effect-service .service-primary-demo{
  display: grid !important;
  place-items: center !important;
  margin-top: clamp(44px, 6vw, 76px) !important;
}

#sec-effect-service .service-primary-demo #benefits-journey-demo{
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

#benefits-journey-demo .phone-row.reverse{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  justify-items: center !important;
  gap: 0 !important;
  width: 100% !important;
}

#benefits-journey-demo .phone-col{
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

#benefits-journey-demo .phone-frame{
  width: min(100%, clamp(300px, 34vw, 380px)) !important;
}

/* RELEASE SIMPLIFICATION · visible information containers stop at two levels.
   Layout wrappers stay responsible for geometry, but no longer render as a
   third card/surface around their children. Media crops and device chrome are
   intentionally preserved as content, not counted as information-card shells. */
#sec-capability .cap-grid,
#sec-capability .dual-wheel-block,
#sec-effect .seat-compare,
#sec-effect-service .ai-story,
#sec-effect-service .ai-story-stage,
#sec-process .process-overview,
#sec-process .process-list,
#sec-cost .cost-hero,
#sec-cost .cost-part,
#sec-cost .cost-workflow,
#sec-cost .cost-tiers,
#sec-cost .service-shooting-photo-grid,
#sec-input .integration-block{
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#sec-capability .cap-grid,
#sec-capability .dual-wheel-block,
#sec-effect .seat-compare,
#sec-effect-service .ai-story,
#sec-effect-service .ai-story-stage,
#sec-process .process-overview,
#sec-process .process-list,
#sec-cost .cost-hero,
#sec-cost .cost-part,
#sec-cost .cost-workflow,
#sec-cost .cost-tiers,
#sec-cost .service-shooting-photo-grid,
#sec-input .integration-block{
  padding: 0 !important;
}

/* The legacy middle column was removed with its repeated explanation. Reflow
   the remaining before/after story into a true two-column composition. */
#sec-cost .cost-ai-pipeline{
  grid-template-columns: minmax(240px, .78fr) minmax(0, 1.22fr) !important;
  gap: clamp(20px, 3vw, 36px) !important;
}

@media (max-width: 899px){
  #sec-cost .cost-ai-pipeline{
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   GLOBAL CORNER POLICY
   Swiss information surfaces use one geometry: square corners.
   Only literal device chrome and true circular controls/diagrams keep curves.
   ================================================================ */
:root{
  --corner-surface: 0px;
  --corner-device: 28px;
  --corner-circle: 50%;
}

/* Two impossible IDs intentionally raise specificity above legacy section
   rules that also use !important, so this single policy remains authoritative. */
main :not(#corner-policy-a):not(#corner-policy-b){
  border-radius: var(--corner-surface) !important;
}

main :not(#corner-policy-a):not(#corner-policy-b):is(
  .seat-demo-phone,
  .phone-frame
){
  border-radius: var(--corner-device) !important;
}

main :not(#corner-policy-a):not(#corner-policy-b):is(
  .media-play-indicator,
  .video-loading-spinner,
  .seat-compare-arrow,
  .ai-story-stage-index,
  .service-story-ai,
  .dual-growth-orbit,
  .dual-growth-hub-status
){
  border-radius: var(--corner-circle) !important;
}

/* Deck videos are ambient, looping content — no click-to-play chrome. */
.media-play-indicator{
  display: none !important;
}

.media-feedback-frame,
.media-feedback-frame.is-media-playing,
.media-feedback-frame.is-media-loading{
  outline: 0 !important;
}

video[data-lazy]{
  cursor: default !important;
}

/* A delayed media request should look intentional, not like a frozen slide. */
.has-video-loading-indicator{
  position: relative;
}

/* Explicit download affordance for same-origin, CDN and embedded offline video.
   It stays above the loading layer so a slow preview never blocks the asset. */
.has-video-download{
  position: relative;
}

.video-download-button{
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 36px;
  gap: 6px;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .48);
  color: #fff;
  font: 600 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .02em;
  background: rgba(5, 10, 8, .78);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
  opacity: .88;
  transition: opacity .16s ease, background-color .16s ease, transform .16s ease;
}

.video-download-button:hover,
.video-download-button:focus-visible{
  color: #07100b;
  background: #3dec6b;
  border-color: #3dec6b;
  opacity: 1;
  transform: translateY(-1px);
}

.video-download-button:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.video-download-button:disabled{
  cursor: wait;
  opacity: .72;
  transform: none;
}

.video-download-button[data-download-state="done"]{
  color: #07100b;
  background: #3dec6b;
  border-color: #3dec6b;
}

.video-download-button svg{
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

@media (max-width: 600px){
  .video-download-button{
    top: 8px;
    right: 8px;
    min-width: 58px;
    min-height: 34px;
    padding: 6px 8px;
    gap: 5px;
    font-size: 11px;
  }
}

.video-loading-indicator{
  position: absolute;
  inset: 0;
  z-index: 8;
  display: grid;
  place-content: center;
  gap: 8px;
  padding: 16px;
  color: #fff;
  text-align: center;
  background: rgba(5, 8, 7, .38);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

.has-video-loading-indicator[data-video-loading-state="loading"] .video-loading-indicator,
.has-video-loading-indicator[data-video-loading-state="error"] .video-loading-indicator{
  opacity: 1;
}

.video-loading-spinner{
  width: 28px;
  height: 28px;
  margin: 0 auto;
  border: 2px solid rgba(255, 255, 255, .28);
  border-top-color: #2ee884;
  border-radius: 50%;
  animation: video-loading-spin .78s linear infinite;
}

.video-loading-text{
  font: 500 12px/1.2 var(--font-ui, system-ui, sans-serif);
  letter-spacing: .08em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}

.has-video-loading-indicator[data-video-loading-state="error"] .video-loading-spinner{
  animation-play-state: paused;
  border-top-color: rgba(255, 255, 255, .72);
}

@keyframes video-loading-spin{
  to{ transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
  .video-loading-spinner{ animation: none; }
}

/* THREE-TIER QUOTE ALIGNMENT
   The three cards share one five-row ledger, so their media, title, summary,
   scope and quote rules land on the same horizontal grid lines. */
@media (min-width: 900px){
  #sec-cost .cost-tiers{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(5, auto) !important;
    align-items: stretch !important;
  }

  #sec-cost .cost-tier{
    display: grid !important;
    grid-row: span 5;
    grid-template-rows: subgrid !important;
    border-top: 2px solid transparent !important;
  }

  #sec-cost .cost-tier.recommended{
    border-top-color: var(--swiss-accent) !important;
  }

  #sec-cost .cost-tier-body{
    display: contents !important;
  }

  #sec-cost .cost-tier-name{
    margin: 18px 24px 5px !important;
  }

  #sec-cost .cost-tier-positioning{
    min-height: 0 !important;
    margin: 0 24px 18px !important;
  }

  #sec-cost .cost-tier-scope{
    min-height: 0 !important;
    margin: 0 24px 20px !important;
  }

  #sec-cost .cost-tier-price{
    align-self: stretch !important;
    margin: 0 24px 28px !important;
  }

  #sec-cost .cost-tier.recommended .cost-tier-price{
    align-self: stretch !important;
    margin: 0 24px 28px !important;
  }
}

/* SERVICE DEMO INTRO · copy and product share one centre axis. */
#sec-effect-service .effect-part-head{
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
}

#sec-effect-service .effect-part-head > div{
  width: min(100%, 72rem) !important;
}

#sec-effect-service .effect-part-title,
#sec-effect-service .effect-part-desc{
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#sec-effect-service .effect-part-desc{
  max-width: 48rem !important;
}

/* SEAT CASE SEGMENTS · mirror the service intro, then expose one dimension at
   a time through a real, keyboard-accessible chapter rail. */
#effect-seat{
  margin-top: var(--r-title, 24px) !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}

#effect-seat .effect-part-head{
  display: flex !important;
  justify-content: center !important;
  text-align: center !important;
}

#effect-seat .effect-part-head > div{
  width: min(100%, 72rem) !important;
}

#effect-seat .effect-part-title,
#effect-seat .effect-part-desc{
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

#effect-seat .effect-part-desc{
  max-width: 48rem !important;
  margin-top: 14px !important;
  color: var(--deck-muted, #a9a9a3) !important;
}

#effect-seat > .phone-stage{
  margin-top: clamp(44px, 6vw, 76px) !important;
}

#effect-seat .seat-segment-intro{
  width: 100% !important;
  margin: var(--r-block, 72px) 0 0 !important;
  text-align: left !important;
}

#effect-seat .seat-segment-intro .effect-result-label{
  color: var(--swiss-accent, #029d4c) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
}

#effect-seat .seat-segment-intro .effect-result-title{
  margin-top: 12px !important;
  color: var(--swiss-paper, #f5f5f1) !important;
}

#effect-seat .seat-segment-desc{
  max-width: var(--m-text, 68ch) !important;
  margin: var(--r-text, 12px) 0 0 !important;
  color: var(--deck-muted, #a9a9a3) !important;
  text-align: left !important;
}

#effect-seat .seat-segment-demo{
  width: min(100%, 690px) !important;
  max-width: 690px !important;
  margin: clamp(36px, 4vw, 56px) auto 0 !important;
}

#effect-seat .seat-segment-panels{
  overflow: hidden !important;
  border: 1px solid var(--swiss-dark-rule, rgba(255,255,255,.16)) !important;
  border-bottom: 0 !important;
  background: #000 !important;
}

#effect-seat .seat-segment-panel{
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #000 !important;
}

#effect-seat .seat-segment-panel[hidden]{
  display: none !important;
}

#effect-seat .seat-segment-panel video{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 690 / 800 !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  background: #000 !important;
}

#effect-seat .seat-segment-tabs{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  border: 1px solid var(--swiss-dark-rule, rgba(255,255,255,.16)) !important;
  background: #0a0a0a !important;
}

#effect-seat .seat-segment-tab{
  position: relative !important;
  display: flex !important;
  min-width: 0 !important;
  min-height: 68px !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-left: 1px solid var(--swiss-dark-rule, rgba(255,255,255,.16)) !important;
  border-top: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #858581 !important;
  box-shadow: none !important;
  font: inherit !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: color .2s ease, background-color .2s ease !important;
}

#effect-seat .seat-segment-tab:first-child{
  border-left: 0 !important;
}

#effect-seat .seat-segment-tab:hover{
  background: rgba(255,255,255,.035) !important;
  color: #d6d6d1 !important;
}

#effect-seat .seat-segment-tab[aria-selected="true"]{
  border-top-color: var(--swiss-accent, #029d4c) !important;
  background: #181818 !important;
  color: var(--swiss-paper, #f5f5f1) !important;
  box-shadow: inset 0 0 0 1px rgba(245,245,241,.72) !important;
}

#effect-seat .seat-segment-tab:focus-visible{
  z-index: 1 !important;
  outline: 2px solid var(--swiss-accent, #029d4c) !important;
  outline-offset: -3px !important;
}

#effect-seat .seat-segment-index{
  color: var(--swiss-accent, #029d4c) !important;
  font-family: var(--mono) !important;
}

#effect-seat .seat-segment-label{
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

@media (max-width: 639px){
  #effect-seat{
    margin-top: var(--r-title, 24px) !important;
    padding-top: 0 !important;
  }
  #effect-seat .seat-segment-intro{
    margin-top: 64px !important;
  }
  #effect-seat .seat-segment-demo{
    margin-top: 32px !important;
  }
  #effect-seat .seat-segment-tab{
    min-height: 62px !important;
    padding: 10px 8px !important;
  }
}

/* SEAT CASE TILES · expose the three seat dimensions together. */
#effect-seat .seat-segment-demo{
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#effect-seat .seat-segment-card{
  min-width: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--swiss-dark-rule, rgba(255,255,255,.16)) !important;
  background: #0a0a0a !important;
}

#effect-seat .seat-segment-card .seat-clip{
  overflow: hidden !important;
  background: #000 !important;
}

#effect-seat .seat-segment-card video{
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 690 / 800 !important;
  object-fit: cover !important;
}

#effect-seat .seat-segment-card-label{
  display: flex !important;
  min-height: 64px !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 12px 14px !important;
  border-top: 1px solid var(--swiss-dark-rule, rgba(255,255,255,.16)) !important;
}

#effect-seat .seat-segment-card .seat-segment-label{
  color: var(--swiss-paper, #f5f5f1) !important;
}

@media (max-width: 639px){
  #effect-seat .seat-segment-demo{
    max-width: none !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
}

/* CONTENT GRID POLICY · transparent layout shells align to the 1160px grid.
   Keep their vertical rhythm, but do not invent an inset without a visible
   surface. Bordered/background cards and semantic subgrids retain padding. */

#sec-effect-service .ai-story-panel{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#sec-effect-service .ai-story-panel > .ai-story-grid{
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* SERVICE STORY WORKBENCH · one continuous production chain.
   The former layout separated the final phone demo from its source material.
   This lock puts source, AI output and customer-facing demo on one grid so the
   relationship reads before the individual cards do. */

#sec-effect-service #effect-service{
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

#sec-effect-service .effect-part-head{
  display: block !important;
  text-align: left !important;
}

#sec-effect-service .effect-part-head > div{
  width: 100% !important;
}

#sec-effect-service .effect-part-title,
#sec-effect-service .effect-part-desc{
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
  text-align: left !important;
}

#sec-effect-service .effect-part-title{
  max-width: 20ch !important;
}

#sec-effect-service .effect-part-desc{
  max-width: 72ch !important;
  margin-top: 18px !important;
  color: #a8a8a4 !important;
}

#sec-effect-service #aiStory{
  margin-top: clamp(36px, 4.5vw, 56px) !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--swiss-dark-rule, rgba(255,255,255,.16)) !important;
  background: #0d0d0d !important;
}

#sec-effect-service #aiStory .ai-story-head{
  display: block !important;
  padding: 24px 28px !important;
  border-bottom: 1px solid var(--swiss-dark-rule, rgba(255,255,255,.16)) !important;
}

#sec-effect-service #aiStory .ai-story-intro{
  max-width: none !important;
}

#sec-effect-service #aiStory .ai-story-title{
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  color: var(--swiss-paper, #f5f5f1) !important;
  text-align: left !important;
}

#sec-effect-service #aiStoryLounge{
  margin: 0 !important;
  padding: 28px !important;
}

#sec-effect-service #aiStoryLounge > .ai-story-grid{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(220px,.78fr) !important;
  gap: 0 !important;
  align-items: stretch !important;
}

#sec-effect-service #aiStoryLounge .ai-story-stage{
  display: grid !important;
  grid-template-rows: auto minmax(0,1fr) auto !important;
  align-content: stretch !important;
  min-width: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  background: #141414 !important;
}

#sec-effect-service #aiStoryLounge .ai-story-stage-head{
  display: flex !important;
  width: auto !important;
  min-height: 58px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 16px 18px !important;
  transform: none !important;
  border: 0 !important;
  border-bottom: 0 !important;
}

#sec-effect-service #aiStoryLounge .ai-story-stage-index{
  display: inline-flex !important;
  width: auto !important;
  height: auto !important;
  color: var(--swiss-accent) !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--mono) !important; font-weight: 600 !important; font-size: var(--tn-meta) !important; line-height: 1 !important;
}

#sec-effect-service #aiStoryLounge .ai-story-stage-label{
  color: #bdbdb8 !important;
}

#sec-effect-service #aiStoryLounge .ai-story-surface{
  height: clamp(360px, 31vw, 440px) !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #050505 !important;
}

#sec-effect-service #aiStoryLounge .ai-story-video{
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  object-fit: cover !important;
}

#sec-effect-service #aiStoryLounge .ai-story-cap{
  min-height: 124px !important;
  padding: 18px !important;
  border: 0 !important;
  border-top: 0 !important;
}

#sec-effect-service #aiStoryLounge .ai-story-cap-title,
#sec-effect-service #aiStoryLounge .ai-story-cap-sub{
  text-align: left !important;
}

#sec-effect-service #aiStoryLounge .ai-story-cap-title{
  color: var(--swiss-paper, #f5f5f1) !important;
}

#sec-effect-service #aiStoryLounge .ai-story-cap-sub{
  margin-top: 8px !important;
  color: #8d8d88 !important;
}

#sec-effect-service #aiStoryLounge .ai-story-connector{
  position: relative !important;
  display: block !important;
  min-height: 100% !important;
}

#sec-effect-service #aiStoryLounge .ai-story-connector::before{
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 8px !important;
  right: 8px !important;
  height: 1px !important;
  background: var(--swiss-dark-rule, rgba(255,255,255,.16)) !important;
}

#sec-effect-service #aiStoryLounge .ai-story-connector::after{
  content: "→" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%,-50%) !important;
  padding: 7px !important;
  background: #0d0d0d !important;
  color: var(--swiss-accent) !important;
  font-family: var(--mono) !important; font-weight: 600 !important; font-size: var(--tn-lead) !important; line-height: 1 !important;
}

@media (max-width: 1023px){
  #sec-effect-service #aiStoryLounge > .ai-story-grid{
    grid-template-columns: minmax(0,1fr) 40px minmax(0,1fr) !important;
  }

  #sec-effect-service #aiStoryLounge .ai-story-connector-final{
    grid-column: 1 / -1 !important;
    min-height: 48px !important;
  }

  #sec-effect-service #aiStoryLounge .ai-story-connector-final::before{
    top: 8px !important;
    bottom: 8px !important;
    left: 50% !important;
    right: auto !important;
    width: 1px !important;
    height: auto !important;
  }

  #sec-effect-service #aiStoryLounge .ai-story-connector-final::after{
    content: "↓" !important;
  }

}

@media (max-width: 767px){
  #sec-effect-service #aiStory .ai-story-head,
  #sec-effect-service #aiStoryLounge{
    padding: 20px !important;
  }

  #sec-effect-service #aiStoryLounge > .ai-story-grid{
    grid-template-columns: minmax(0,1fr) !important;
  }

  #sec-effect-service #aiStoryLounge .ai-story-connector,
  #sec-effect-service #aiStoryLounge .ai-story-connector-final{
    grid-column: 1 !important;
    min-height: 44px !important;
  }

  #sec-effect-service #aiStoryLounge .ai-story-connector::before{
    top: 7px !important;
    bottom: 7px !important;
    left: 50% !important;
    right: auto !important;
    width: 1px !important;
    height: auto !important;
  }

  #sec-effect-service #aiStoryLounge .ai-story-connector::after{
    content: "↓" !important;
  }

  #sec-effect-service #aiStoryLounge .ai-story-surface{
    height: min(112vw, 440px) !important;
  }

}

/* Chinese typography weight system
   400 = reading copy, 500 = labels / metadata, 600 = titles / emphasis.
   English keeps its existing weight hierarchy. */
html:lang(zh-CN){
  --zh-weight-body: 400;
  --zh-weight-label: 500;
  --zh-weight-title: 600;
}

html:lang(zh-CN) .nav *,
html:lang(zh-CN) :is(
  #cover,
  #sec-capability,
  #sec-effect,
  #sec-effect-service,
  #sec-process,
  #sec-cost,
  #sec-input
) *:not(:is(h1,h2,h3,h4,h5,h6)){
  font-weight: var(--zh-weight-body) !important;
}

html:lang(zh-CN) .nav :is(a, button, [class*="label"]),
html:lang(zh-CN) :is(
  #cover,
  #sec-capability,
  #sec-effect,
  #sec-effect-service,
  #sec-process,
  #sec-cost,
  #sec-input
) :is(
  button,
  [class*="label"],
  [class*="kicker"],
  [class*="tag"],
  [class*="meta"],
  [class*="owner"],
  [class*="badge"],
  [class*="chip"],
  [class*="eyebrow"]
){
  font-weight: var(--zh-weight-label) !important;
}

html:lang(zh-CN) :is(
  #cover,
  #sec-capability,
  #sec-effect,
  #sec-effect-service,
  #sec-process,
  #sec-cost,
  #sec-input
) :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  strong,
  b,
  [class*="title"],
  [class*="headline"],
  [class*="metric"],
  [class*="price"],
  [class*="number"],
  [class*="-num"],
  .din-num
){
  font-weight: var(--zh-weight-title) !important;
}

/* BENEFITS JOURNEY REDESIGN · two distinct acts
   S16 explains source-to-film. S03 gives the final demo its own stage. */
#sec-effect-service,
#sec-effect-service-demo{
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#sec-effect-service{
  border-top: 1px solid var(--swiss-dark-rule, rgba(255,255,255,.16)) !important;
  background: #090909 !important;
}

#sec-effect-service #effect-service{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  border: 0 !important;
  background: transparent !important;
}

#sec-effect-service .service-story-head{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  grid-template-areas:
    "meta"
    "title"
    "desc" !important;
  gap: 18px !important;
  align-items: start !important;
  margin: 0 0 clamp(48px,5vw,72px) !important;
  padding: 0 !important;
}

#sec-effect-service .service-story-meta,
#sec-effect-service-demo .service-demo-meta{
  color: var(--swiss-accent) !important;
  font-family: var(--mono) !important; font-weight: 600 !important; font-size: var(--tn-meta) !important; line-height: 1 !important;
  text-transform: uppercase !important;
}

#sec-effect-service .service-story-meta{ grid-area: meta !important; }

#sec-effect-service .service-story-head .effect-part-title{
  grid-area: title !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  text-align: left !important;
  color: var(--swiss-paper) !important;
}

#sec-effect-service .service-story-head .effect-part-desc{
  grid-area: desc !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 0 4px !important;
  transform: none !important;
  text-align: left !important;
  color: #a8a8a4 !important;
}

#sec-effect-service #aiStory{
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--swiss-dark-rule, rgba(255,255,255,.16)) !important;
  background: #0d0d0d !important;
  color: var(--swiss-paper) !important;
}

#sec-effect-service #aiStory > .ai-story-head{
  display: grid !important;
  grid-template-columns: minmax(0,1.05fr) minmax(320px,.95fr) !important;
  gap: clamp(36px,5vw,72px) !important;
  align-items: end !important;
  margin: 0 !important;
  padding: clamp(24px,2.5vw,36px) !important;
  border-bottom: 1px solid var(--swiss-dark-rule, rgba(255,255,255,.16)) !important;
}

#sec-effect-service #aiStory .ai-story-intro{
  display: grid !important;
  gap: 12px !important;
  width: auto !important;
  max-width: none !important;
}

#sec-effect-service #aiStory .ai-story-kicker{
  color: var(--swiss-accent) !important;
  font-family: var(--mono) !important; font-weight: 600 !important; font-size: var(--tn-meta) !important; line-height: 1 !important;
}

#sec-effect-service #aiStory .ai-story-title{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
  text-align: left !important;
  color: var(--swiss-paper) !important;
}

#sec-effect-service #aiStory .ai-story-desc{
  max-width: 42ch !important;
  margin: 0 !important;
  color: #a8a8a4 !important;
}

#sec-effect-service #aiStoryLounge{
  width: 100% !important;
  margin: 0 !important;
  padding: clamp(24px,2.5vw,36px) !important;
  text-align: left !important;
}

#sec-effect-service .service-story-grid{
  display: grid !important;
  grid-template-columns: minmax(0,4fr) minmax(96px,.85fr) minmax(0,7.3fr) !important;
  gap: clamp(18px,1.9vw,30px) !important;
  align-items: center !important;
}

#sec-effect-service .service-story-card{
  display: grid !important;
  grid-template-rows: auto minmax(0,1fr) auto !important;
  min-width: 0 !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  /* Let the source material and finished film read as two open stages,
     rather than two framed cards. */
  border: 0 !important;
  background: #111 !important;
  color: var(--swiss-paper) !important;
}

#sec-effect-service .service-story-card .ai-story-stage-head{
  display: flex !important;
  width: 100% !important;
  min-height: 62px !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  transform: none !important;
  border-bottom: 0 !important;
}

#sec-effect-service .service-story-card .ai-story-stage-index{
  color: var(--swiss-accent) !important;
  font-family: var(--mono) !important; font-weight: 600 !important; font-size: var(--tn-meta) !important; line-height: 1 !important;
}

#sec-effect-service .service-story-card .ai-story-stage-label,
#sec-effect-service .service-story-card .ai-story-result-meta{
  color: var(--swiss-paper) !important;
}

#sec-effect-service .service-story-card .ai-story-result-meta{
  margin-left: auto !important;
  color: #7f807d !important;
  font-family: var(--mono) !important;
}

#sec-effect-service .service-source-grid{
  display: grid !important;
  width: 100% !important;
  min-width: 0 !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  grid-template-rows: repeat(2,minmax(0,1fr)) !important;
  gap: 1px !important;
  /* The source card matches the film card's height. A fixed aspect ratio would
     calculate a wider intrinsic width and push the second column outside it. */
  aspect-ratio: auto !important;
  background: var(--swiss-dark-rule, rgba(255,255,255,.16)) !important;
}

#sec-effect-service .service-source-grid figure{
  position: relative !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #090909 !important;
}

#sec-effect-service .service-source-grid img{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

#sec-effect-service .service-source-grid figcaption{
  position: absolute !important;
  left: 10px !important;
  bottom: 9px !important;
  padding: 4px 7px !important;
  background: rgba(10,10,10,.82) !important;
  color: var(--swiss-paper) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

#sec-effect-service .service-story-bridge{
  position: relative !important;
  display: grid !important;
  justify-items: center !important;
  align-content: center !important;
  gap: 0 !important;
  min-height: 68px !important;
  padding: 0 !important;
}

/* 贯穿的能量轨道：左侧素材 → 右侧成片 */
#sec-effect-service .service-story-bridge::before{
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: -6px !important;
  bottom: auto !important;
  left: -6px !important;
  width: auto !important;
  height: 2px !important;
  transform: translateY(-50%) !important;
  background:
    linear-gradient(90deg,
      rgba(2,157,76,0) 0%,
      rgba(2,157,76,.45) 18%,
      var(--swiss-accent) 55%,
      var(--swiss-accent) 100%) !important;
  box-shadow: 0 0 18px rgba(2,157,76,.45) !important;
}

/* 大号箭头：实心三角，落在右端 */
#sec-effect-service .service-story-bridge::after{
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: -14px !important;
  left: auto !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  background: none !important;
  transform: translateY(-50%) !important;
  border-top: 9px solid transparent !important;
  border-bottom: 9px solid transparent !important;
  border-left: 14px solid var(--swiss-accent) !important;
  filter: drop-shadow(0 0 9px rgba(2,157,76,.5)) !important;
  animation: bridge-arrow-nudge 2.4s ease-in-out infinite !important;
}

@keyframes bridge-arrow-nudge{
  0%, 100% { transform: translateY(-50%) translateX(0); opacity: 1; }
  50%      { transform: translateY(-50%) translateX(6px); opacity: .78; }
}

/* AI 徽章：圆形描边光环 + 呼吸脉冲（选择器加权，避免被扁平化主题重置圆角/字号） */
#sec-effect-service .service-story-bridge .service-story-ai{
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  width: 54px !important;
  height: 54px !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: var(--swiss-accent) !important;
  color: var(--swiss-accent-on) !important;
  font-family: var(--mono) !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  letter-spacing: .06em !important;
  line-height: 1 !important;
  box-shadow:
    0 0 0 6px #0d0d0d,
    0 0 0 7px rgba(2,157,76,.5),
    0 0 22px rgba(2,157,76,.42) !important;
}

/* 外扩脉冲环 */
#sec-effect-service .service-story-bridge .service-story-ai::after{
  content: "" !important;
  position: absolute !important;
  inset: -7px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(2,157,76,.65) !important;
  animation: bridge-ai-pulse 2.4s ease-out infinite !important;
  pointer-events: none !important;
}

@keyframes bridge-ai-pulse{
  0%   { transform: scale(1);    opacity: .85; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  #sec-effect-service .service-story-bridge::after,
  #sec-effect-service .service-story-bridge .service-story-ai::after{
    animation: none !important;
  }
}

#sec-effect-service .service-story-bridge ol{
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  gap: 12px !important;
  margin: 56px 0 0 !important;
  padding: 10px 0 !important;
  list-style: none !important;
  background: #0d0d0d !important;
  text-align: center !important;
}

#sec-effect-service .service-story-bridge li{
  color: #a8a8a4 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
}

#sec-effect-service .service-story-video-wrap{
  position: relative !important;
  min-height: clamp(380px,38vw,560px) !important;
  overflow: hidden !important;
  background: #080808 !important;
}

#sec-effect-service .service-story-video-wrap > video{
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  transform: none !important;
  object-fit: cover !important;
  object-position: center 38% !important;
  border-radius: 0 !important;
}

#sec-effect-service .service-story-video-copy{
  position: absolute !important;
  left: clamp(18px,2.2vw,34px) !important;
  right: auto !important;
  bottom: 58px !important;
  display: grid !important;
  max-width: min(72%,430px) !important;
  gap: 8px !important;
  padding: 14px 16px !important;
  background: #080808 !important;
  color: #fff !important;
  text-shadow: none !important;
}

#sec-effect-service .service-story-video-copy span{
  color: var(--swiss-accent) !important;
  font-weight: 600 !important;
}

#sec-effect-service .service-story-video-copy strong{
  max-width: 13ch !important;
  color: #fff !important;
  font-weight: 500 !important;
  line-height: 1.12 !important;
}

#sec-effect-service .service-story-progress{
  position: absolute !important;
  left: clamp(18px,2.2vw,34px) !important;
  right: clamp(18px,2.2vw,34px) !important;
  bottom: 18px !important;
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  border-top: 1px solid rgba(255,255,255,.5) !important;
}

#sec-effect-service .service-story-progress button{
  position: relative !important;
  min-width: 0 !important;
  padding-top: 8px !important;
  padding-right: 8px !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(255,255,255,.76) !important;
  font: inherit !important;
  font-weight: 500 !important;
  text-align: left !important;
  cursor: pointer !important;
}

#sec-effect-service .service-story-progress button.is-active{
  color: var(--swiss-accent) !important;
}

#sec-effect-service .service-story-progress button.is-active::before{
  content: "" !important;
  position: absolute !important;
  top: -2px !important;
  right: 0 !important;
  left: 0 !important;
  height: 2px !important;
  background: var(--swiss-accent) !important;
}

#sec-effect-service .service-story-progress button:focus-visible{
  outline: 2px solid var(--swiss-accent) !important;
  outline-offset: 4px !important;
}

#sec-effect-service .service-story-card .ai-story-cap{
  display: grid !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 18px !important;
  border-top: 0 !important;
  text-align: left !important;
}

#sec-effect-service .service-story-card .ai-story-cap-title{
  color: var(--swiss-paper) !important;
}

#sec-effect-service .service-story-card .ai-story-cap-sub{
  color: #8e8f8b !important;
}

#sec-effect-service-demo{
  scroll-margin-top: calc(var(--nav-h) + 28px) !important;
  /* Match the source-to-film module above: the split card owns the surface. */
  padding: 0 !important;
  background: #090909 !important;
}

#sec-effect-service-demo .service-demo-split{
  display: grid !important;
  grid-template-columns: minmax(0,5fr) minmax(0,7fr) !important;
  min-height: min(760px,82vh) !important;
  border: 1px solid var(--swiss-dark-rule, rgba(255,255,255,.16)) !important;
  background: #0d0d0d !important;
}

#sec-effect-service-demo .service-demo-copy{
  display: flex !important;
  min-width: 0 !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: clamp(38px,5vw,72px) !important;
  border-right: 1px solid var(--swiss-dark-rule, rgba(255,255,255,.16)) !important;
}

#sec-effect-service-demo .service-demo-meta{
  display: block !important;
  margin-bottom: clamp(14px, 1.5vw, 20px) !important;
}

#sec-effect-service-demo .service-demo-copy h3{
  /* The journey-demo headline is an editable copy block: let its bounds
     follow the full copy column instead of capping it at a character width. */
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 clamp(18px, 2vw, 24px) !important;
  color: var(--swiss-paper) !important;
}

#sec-effect-service-demo .service-demo-copy > p{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  align-self: stretch !important;
  margin: 0 0 clamp(36px,4vw,52px) !important;
  color: #a8a8a4 !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

#sec-effect-service-demo .service-demo-points{
  display: grid !important;
  gap: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: var(--swiss-dark-rule, rgba(255,255,255,.16)) !important;
}

#sec-effect-service-demo .service-demo-points li{
  display: grid !important;
  grid-template-columns: 34px minmax(0,1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 15px 0 !important;
  background: #0d0d0d !important;
}

#sec-effect-service-demo .service-demo-points span{
  color: var(--swiss-accent) !important;
  font-family: var(--mono) !important; font-weight: 600 !important; font-size: var(--tn-meta) !important; line-height: 1.4 !important;
}

#sec-effect-service-demo .service-demo-points strong{
  color: var(--swiss-paper) !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
}

#sec-effect-service-demo .service-demo-stage{
  position: relative !important;
  display: grid !important;
  min-width: 0 !important;
  min-height: 680px !important;
  place-items: center !important;
  overflow: hidden !important;
  padding: clamp(42px,5vw,72px) !important;
  background: #080808 !important;
}

#sec-effect-service-demo .service-demo-stage::before{
  content: none !important;
  display: none !important;
}

#sec-effect-service-demo #benefits-journey-demo{
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#sec-effect-service-demo #benefits-journey-demo .phone-frame{
  width: min(28vw,330px) !important;
  max-width: 330px !important;
  height: auto !important;
  transform: none !important;
  box-shadow: none !important;
}

/* The recording already includes the iPhone status bar and Dynamic Island. */
#sec-effect-service-demo #benefits-journey-demo .phone-frame::before{
  content: none !important;
  display: none !important;
}

#sec-effect-service-demo #benefits-journey-demo video{
  transform: none !important;
  cursor: default !important;
}

#sec-effect-service-demo .service-demo-stage-note{
  position: absolute !important;
  z-index: 2 !important;
  left: clamp(22px,3vw,42px) !important;
  right: clamp(22px,3vw,42px) !important;
  bottom: clamp(20px,2.5vw,34px) !important;
  display: flex !important;
  justify-content: space-between !important;
  gap: 20px !important;
  padding-top: 13px !important;
  border-top: 1px solid var(--swiss-dark-rule, rgba(255,255,255,.16)) !important;
}

#sec-effect-service-demo .service-demo-stage-note span,
#sec-effect-service-demo .service-demo-stage-note strong{
  font-weight: 500 !important;
}

#sec-effect-service-demo .service-demo-stage-note span{ color: var(--swiss-accent) !important; }
#sec-effect-service-demo .service-demo-stage-note strong{ color: #a8a8a4 !important; }

/* Headings are excluded so the Chinese deck keeps the same title weight
   as the English one; body copy still resets to the reading weight. */
html:lang(zh-CN) #sec-effect-service-demo *:not(:is(h1,h2,h3,h4,h5,h6)){
  font-weight: var(--zh-weight-body) !important;
}

html:lang(zh-CN) #sec-effect-service-demo :is(
  [class*="meta"],
  [class*="status"],
  [class*="link"],
  .service-demo-points span,
  .service-demo-points strong
){
  font-weight: var(--zh-weight-label) !important;
}

html:lang(zh-CN) #sec-effect-service-demo strong{
  font-weight: var(--zh-weight-label) !important;
}

@media (max-width: 1023px){
  #sec-effect-service,
  #sec-effect-service-demo{
    padding-left: 40px !important;
    padding-right: 40px !important;
  }

  #sec-effect-service .service-story-head,
  #sec-effect-service #aiStory > .ai-story-head{
    grid-template-columns: minmax(0,1fr) !important;
    grid-template-areas: none !important;
    gap: 18px !important;
  }

  #sec-effect-service .service-story-meta,
  #sec-effect-service .service-story-head .effect-part-title,
  #sec-effect-service .service-story-head .effect-part-desc{
    grid-area: auto !important;
  }

  #sec-effect-service .service-story-grid{
    grid-template-columns: minmax(0,4fr) minmax(84px,.75fr) minmax(0,6.35fr) !important;
    gap: 16px !important;
  }

  #sec-effect-service .service-story-bridge .service-story-ai{
    width: 46px !important;
    height: 46px !important;
    font-size: 15px !important;
  }

  #sec-effect-service .service-story-bridge::after{
    border-top-width: 8px !important;
    border-bottom-width: 8px !important;
    border-left-width: 12px !important;
  }

  #sec-effect-service .service-story-card .ai-story-result-meta{
    display: none !important;
  }

  #sec-effect-service .service-story-video-wrap{
    min-height: clamp(360px,56vw,520px) !important;
  }

  #sec-effect-service-demo .service-demo-split{
    grid-template-columns: minmax(0,1fr) !important;
    min-height: 0 !important;
  }

  #sec-effect-service-demo .service-demo-copy{
    border-right: 0 !important;
    border-bottom: 1px solid var(--swiss-dark-rule, rgba(255,255,255,.16)) !important;
  }

  #sec-effect-service-demo .service-demo-copy h3{
    max-width: none !important;
  }

  #sec-effect-service-demo .service-demo-stage{
    min-height: 620px !important;
  }

  #sec-effect-service-demo #benefits-journey-demo .phone-frame{
    width: min(42vw,300px) !important;
  }
}

@media (max-width: 767px){
  #sec-effect-service,
  #sec-effect-service-demo{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #sec-effect-service{
    padding-top: 72px !important;
    padding-bottom: 72px !important;
  }

  #sec-effect-service .service-story-head{
    margin-bottom: 36px !important;
  }

  #sec-effect-service #aiStory > .ai-story-head,
  #sec-effect-service #aiStoryLounge{
    padding: 20px !important;
  }

  #sec-effect-service .service-story-grid{
    grid-template-columns: minmax(0,1fr) !important;
    gap: 0 !important;
  }

  #sec-effect-service .service-story-card{
    height: auto !important;
  }

  #sec-effect-service .service-story-bridge{
    min-height: 84px !important;
    grid-template-columns: auto 1fr !important;
    justify-items: start !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 20px !important;
  }

  #sec-effect-service .service-story-bridge::before{
    top: 50% !important;
    bottom: auto !important;
    left: 20px !important;
    right: 20px !important;
    width: auto !important;
    height: 2px !important;
    transform: translateY(-50%) !important;
  }

  /* 移动端堆叠：箭头朝下 */
  #sec-effect-service .service-story-bridge::after{
    content: "" !important;
    top: 50% !important;
    left: auto !important;
    right: 18px !important;
    width: 0 !important;
    height: 0 !important;
    transform: translateY(-50%) !important;
    border-left: 9px solid transparent !important;
    border-right: 9px solid transparent !important;
    border-top: 14px solid var(--swiss-accent) !important;
    border-bottom: 0 !important;
    animation: bridge-arrow-nudge-y 2.4s ease-in-out infinite !important;
  }

  @keyframes bridge-arrow-nudge-y{
    0%, 100% { transform: translateY(-50%) translateY(0); opacity: 1; }
    50%      { transform: translateY(-50%) translateY(6px); opacity: .78; }
  }

  #sec-effect-service .service-story-bridge .service-story-ai{
    width: 46px !important;
    height: 46px !important;
    font-size: 15px !important;
  }

  #sec-effect-service .service-story-bridge ol{
    grid-template-columns: repeat(3,auto) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 8px !important;
    text-align: left !important;
  }

  #sec-effect-service .service-story-video-wrap{
    min-height: min(118vw,520px) !important;
  }

  #sec-effect-service-demo{
    padding-bottom: 72px !important;
  }

  #sec-effect-service-demo .service-demo-copy{
    padding: 34px 24px 40px !important;
  }

  #sec-effect-service-demo .service-demo-stage{
    min-height: 540px !important;
    padding: 42px 20px 70px !important;
  }

  #sec-effect-service-demo #benefits-journey-demo .phone-frame{
    width: min(64vw,250px) !important;
  }

  #sec-effect-service-demo .service-demo-stage-note{
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
}

@media (max-width: 420px){
  #sec-effect-service .service-story-card .ai-story-stage-head{
    min-height: 56px !important;
    padding: 0 14px !important;
  }

  #sec-effect-service-demo .service-demo-points li{
    grid-template-columns: 28px minmax(0,1fr) !important;
  }

}

/* Preview-centering lock. The visual editor has persisted fixed widths and
   180px side margins on several top-level modules. Those values make the
   continuous canvas wider than its 1280px design width and allow anchor
   navigation to pan every following section horizontally. */
main > #sec-capability,
main > #sec-effect,
main > #sec-process{
  box-sizing: border-box !important;
}

/* Cancel the editor-saved inline translate without rewriting the live draft. */

/* 41. Pricing proof: make professional labor visible beneath the three tiers. */
/* Keep the rule full-bleed while the content remains aligned to the deck grid. */
#sec-cost .cost-team-investment{
  position: relative !important;
  margin-top: clamp(48px,6vw,88px) !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  background: transparent !important;
  color: var(--swiss-paper) !important;
}

#sec-cost .cost-team-investment::before{
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  width: 100vw !important;
  height: 1px !important;
  transform: translateX(-50%) !important;
  background: var(--swiss-dark-rule) !important;
  pointer-events: none !important;
}

#sec-cost .cost-team-investment::before{ top: 0 !important; }

#sec-cost .cost-team-head{
  padding: clamp(34px,4.4vw,62px) clamp(24px,3.2vw,48px) clamp(28px,3vw,42px) !important;
}

#sec-cost .cost-team-kicker{
  margin-bottom: 18px !important;
  color: var(--swiss-accent) !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .13em !important;
  line-height: 1.4 !important;
}

/* Keep section numbers neutral; the chapter label is the only accent colour. */
#sec-cost .eyebrow-num{
  color: var(--swiss-grey-3) !important;
}

#sec-cost .cost-team-copy{
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  gap: clamp(20px,2vw,30px) !important;
  align-items: start !important;
}

#sec-cost .cost-team-copy h3{
  width: 100% !important;
  margin: 0 !important;
  max-width: none !important;
  color: var(--swiss-paper) !important;
  font-size: clamp(30px,3vw,48px) !important;
  font-weight: 600 !important;
  letter-spacing: -.035em !important;
  line-height: 1.12 !important;
}

#sec-cost .cost-team-copy p{
  margin: 0 !important;
  max-width: 58ch !important;
  color: rgba(255,255,255,.62) !important;
  font-size: clamp(14px,1.15vw,17px) !important;
  line-height: 1.75 !important;
}

/* Both statements are editable title blocks, so their selection bounds and
   reading width should match the container that introduces the next section. */
#sec-cost > .tier-intro{
  width: 100% !important;
  max-width: none !important;
}

#sec-cost .tier-intro h3{
  width: 100% !important;
  max-width: none !important;
}

#sec-cost .cost-team-roles{
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 1px !important;
  border-top: 1px solid var(--swiss-dark-rule) !important;
  background: var(--swiss-dark-rule) !important;
}

#sec-cost .cost-team-role{
  min-width: 0 !important;
  min-height: 220px !important;
  padding: clamp(26px,2.4vw,38px) !important;
  background: var(--swiss-dark-card) !important;
}

#sec-cost .cost-team-role-no{
  margin-bottom: clamp(34px,4vw,62px) !important;
  color: var(--swiss-accent) !important;
  font-family: var(--mono) !important;
  font-size: 12px !important;
  letter-spacing: .12em !important;
}

#sec-cost .cost-team-role h4{
  margin: 0 0 12px !important;
  color: var(--swiss-paper) !important;
  font-size: clamp(18px,1.45vw,23px) !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
  line-height: 1.25 !important;
}

#sec-cost .cost-team-role p{
  margin: 0 !important;
  color: rgba(255,255,255,.5) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

#sec-cost .cost-team-summary{
  display: grid !important;
  grid-template-columns: minmax(220px,.72fr) minmax(0,1.28fr) !important;
  gap: 28px !important;
  align-items: baseline !important;
  padding: 26px clamp(24px,3.2vw,48px) 28px !important;
  border-top: 1px solid var(--swiss-dark-rule) !important;
}

#sec-cost .cost-team-summary strong{
  color: var(--swiss-accent) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

#sec-cost .cost-team-summary span{
  color: rgba(255,255,255,.58) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

@media (max-width: 900px){
  #sec-cost .cost-team-copy{
    grid-template-columns: minmax(0,1fr) !important;
    gap: 20px !important;
    align-items: start !important;
  }

  #sec-cost .cost-team-copy h3{
    max-width: none !important;
  }

  #sec-cost .cost-team-roles{
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  }

  #sec-cost .cost-team-summary{
    grid-template-columns: minmax(0,1fr) !important;
    gap: 8px !important;
  }
}

/* The full-cycle reference is one row of the parent grid: span the available
   width instead of adding a framed card treatment. */
#sec-process .process-reference{
  grid-column: 1 / -1 !important;
  padding: 32px 0 !important;
  border: 0 !important;
  border-top: 2px solid var(--swiss-accent) !important;
  border-radius: 0 !important;
}

@media (max-width: 639px){
  #sec-process .process-reference{
    padding: 24px 0 !important;
  }
}

@media (max-width: 560px){
  #sec-cost .cost-team-head{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  #sec-cost .cost-team-roles{
    grid-template-columns: minmax(0,1fr) !important;
  }

  #sec-cost .cost-team-role{
    min-height: 0 !important;
    padding: 26px 20px 30px !important;
  }

  #sec-cost .cost-team-role-no{
    margin-bottom: 28px !important;
  }

  #sec-cost .cost-team-summary{
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* PHONE QA · final mobile overrides after the legacy responsive layers. */
@media (max-width: 767px){
  /* The rail sits at 96px on a 390px viewport; move the output arrow clear of it. */
  #sec-process .process-body{
    padding-left: 32px !important;
  }

  /* The connector remains horizontal on phones, so its arrow must point right. */
  #sec-effect-service .service-story-bridge::after{
    top: 50% !important;
    right: 18px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    border-top: 8px solid transparent !important;
    border-right: 0 !important;
    border-bottom: 8px solid transparent !important;
    border-left: 12px solid var(--swiss-accent) !important;
    animation: bridge-arrow-nudge 2.4s ease-in-out infinite !important;
  }

  /* Keep the long English capability statement to two readable phone lines. */
  html:lang(en) #sec-capability > .section-title{
    font-size: min(32px, 4.7vw) !important;
    line-height: 1.18 !important;
  }
}

/* PRICING VISIBILITY · keep values in source for later restoration, but do
   not expose them in the current proposal. Remove `is-pricing-hidden` from
   `.cost-tiers` to show the three values again. */
#sec-cost .cost-tiers.is-pricing-hidden .cost-tier-price{
  display: none !important;
}