/* ============================================================
   v50) Line wrapping: break only at phrase boundaries (<wbr>)
   ============================================================ */
.intro-hero-copy,.intro-manifesto,.workflow-story-copy,.flow,.roadmap-heading,.future-copy,.roadmap-disclaimer,.faqsec,.closing{word-break:keep-all;overflow-wrap:break-word}
:is(.intro-hero-copy,.intro-manifesto,.workflow-story-copy,.flow,.future-copy,.faqsec,.closing) :is(p,li,summary){text-wrap:pretty}
@media (max-width:600px){.br-pc{display:none}}
/* PC keeps the designed nowrap lines of the hero heading */
@media (min-width:901px){.intro-hero-copy h1 wbr{display:none}}
/* ============================================================
   v50) Feature section on phones / tablets:
   show each screen right under its own step
   ============================================================ */
@media (max-width:900px){
  .workflow-sticky .workflow-story-grid{display:flex;flex-direction:column;gap:0}
  .workflow-sticky .journey-copy,
  .workflow-sticky .journey-visual,
  .workflow-sticky .browser-frame,
  .workflow-sticky .browser-content{display:contents}
  .workflow-sticky .browser-bar{display:none}
  .workflow-sticky .journey-step{min-height:auto;opacity:1}
  .workflow-sticky .journey-step-inner{padding:54px 0 24px}
  .workflow-sticky .journey-step[data-step=record]{order:1}
  .workflow-sticky .scene-record{order:2}
  .workflow-sticky .journey-step[data-step=summary]{order:3}
  .workflow-sticky .scene-summary{order:4}
  .workflow-sticky .journey-step[data-step=action]{order:5}
  .workflow-sticky .scene-action{order:6}
  .workflow-sticky .journey-step[data-step=report]{order:7}
  .workflow-sticky .scene-report{order:8}
  .workflow-sticky .browser-scene,
  .workflow-sticky .browser-scene.is-visible{position:relative;inset:auto;display:grid;grid-template-rows:34px minmax(0,1fr);width:100%;max-width:600px;height:var(--m-scene-h);padding:0;opacity:1;visibility:visible;transform:none;background:#fffffb;border:1px solid #d7dacd;border-radius:14px;box-shadow:0 18px 50px rgba(39,48,20,.14);overflow:hidden}
  .workflow-sticky .browser-scene:before{content:"";border-bottom:1px solid #edeee7;background:radial-gradient(circle at 17px 50%,#d9aaa0 0 3.5px,transparent 4px),radial-gradient(circle at 29px 50%,#ddca83 0 3.5px,transparent 4px),radial-gradient(circle at 41px 50%,#a1b37e 0 3.5px,transparent 4px),#f5f5f3}
  .workflow-sticky .browser-scene>.sa-shell,
  .workflow-sticky .browser-scene>.sa-shell>.sa-layout{min-height:0!important;height:100%!important}
  .workflow-sticky .scene-record{--m-scene-h:390px}
  .workflow-sticky .scene-summary{--m-scene-h:440px}
  .workflow-sticky .scene-action{--m-scene-h:480px}
  .workflow-sticky .scene-report{--m-scene-h:512px}
  .workflow-sticky .action-content .journey-agent-tabs{flex-wrap:wrap;row-gap:6px}
}
@media (min-width:601px) and (max-width:900px){
  .workflow-sticky .scene-record{--m-scene-h:300px}
  .workflow-sticky .scene-summary{--m-scene-h:370px}
}
/* intro (hero + manifesto): use the phone layout up to 900px so the copy is not squeezed on tablets */
@media (min-width:801px) and (max-width:900px){
  .hero-body{padding:0}
  .hero-cta{gap:18px;margin-top:24px}
  .hero-cta .btn{padding:13px 22px}
  .manifesto{padding:60px 0}
  .manifesto h2{font-size:27px}
  .manifesto h2{font-size:27px;white-space:normal}
  .manifesto h2 em{margin-left:.1em}
  .pain-lines{grid-template-columns:1fr;gap:12px;margin-top:28px;max-width:340px}
  .pain-card{min-height:0;display:grid;grid-template-columns:112px 1fr;gap:13px;align-items:center;padding:10px}
  .pain-art{height:76px}
  .pain-art svg{width:105px;height:62px}
  .pain-card p{margin:0;font-size:10px;line-height:1.65}
  .pain-card b{font-size:14px}
  .hero-motion-wrap{padding-top:4px}
  .intro-grid{display:grid;grid-template-columns:1fr;grid-template-rows:auto auto auto;column-gap:0}
  .intro-hero-copy{grid-column:1;grid-row:1;padding:54px 0 30px}
  .intro-hero-copy h1{font-size:clamp(36px,9vw,50px);line-height:1.45;white-space:normal}
  .intro-visual{grid-column:1;grid-row:2;position:relative;top:auto;height:auto;display:block}
  .intro-manifesto{grid-column:1;grid-row:3;padding:68px 0 74px;text-align:center}
  .intro-manifesto h2{font-size:34px;line-height:1.5}
  .intro-manifesto h2 em{display:inline;margin-left:.1em}
  .intro-manifesto .pain-lines{max-width:430px;margin:30px auto 0}
  .intro-manifesto .pain-card{grid-template-columns:38px 1fr;min-height:76px;padding:13px 15px;opacity:1;transform:none}
  .intro-manifesto .pain-card p{font-size:11px}
  .intro-manifesto .pain-card:after,.intro-manifesto .pain-card:before,.summary-pins{display:none}
  .intro-journey.is-second .sa-motion *{animation-play-state:running!important}
  .intro-grid{grid-template-rows:auto auto auto}
  .intro-manifesto{padding:68px 0 136px}
  #intro-journey .fv-recorder-bar{width: min(285px, 76%); grid-template-columns: 40px minmax(0, 1fr) 32px 22px;}
  #intro-journey .fv-recorder-wave{padding-left: 8px;}
  #intro-journey .fv-recorder-marquee span{font-size: 8px;}
  #intro-journey .sa-meeting-head strong{font-size: 15px;}
  #intro-journey .fv-rec-line{font-size: 10.5px; grid-template-columns: 38px 1fr; gap: 8px;}
  #intro-journey .sa-summary-top .sa-summary-title{font-size: 18px;}
  .hero-cta{gap:12px;margin-top:28px}
  .hero-cta .btn{min-height:56px;font-size:14px}
  .hero-cta .btn.primary{padding:10px 12px 10px 28px}
}