/* Original MailShare mascot and motion composition. User image is unchanged. */
.hero{padding-top:35px;background:#eaf0f5;position:relative}
.hero .eyebrow{margin-bottom:15px;font-size:14px}
.hero h1{font-size:clamp(48px,4.5vw,66px);line-height:1.22;white-space:nowrap}
.hero h1 br{display:none}
.hero-lead{font-size:14px;line-height:1.9;margin-top:17px}
.hero-actions{margin:19px 0 15px}
.hero-actions .button{padding:15px 24px;font-size:14px;min-width:220px}
.hero-price strong{font-size:27px}
.hero-copy>.fine{font-size:14px;margin-top:8px}
.mascot-scene{height:470px;width:1160px;max-width:100%;margin:5px 0 0;padding:0;position:relative;isolation:isolate;align-self:center}
.hero-swoosh{position:absolute;width:1400px;height:160px;left:-170px;top:190px;background:white;border-radius:130px;transform:rotate(-21deg);z-index:-1;pointer-events:none}
.swoosh-two{left:80px;top:340px;width:1150px;height:130px;transform:rotate(-21deg);opacity:.72}
.hero-mascot{position:absolute;left:-45px;bottom:-92px;width:680px;z-index:3;pointer-events:none;filter:drop-shadow(0 22px 20px #183b5015)}
.hero-mascot img{width:100%;height:auto;transform-origin:52% 55%;animation:mascot-bob 6s ease-in-out infinite;will-change:transform}
@keyframes mascot-bob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-15px) rotate(-1deg)}}
.scene-app{position:absolute;z-index:5;display:flex;flex-direction:column;align-items:center;gap:6px;animation:app-bob 6.5s ease-in-out infinite;pointer-events:none}
.scene-app img{width:62px;height:62px;object-fit:contain;background:#fff;padding:13px;border:1px solid #dce8ee;border-radius:50%;box-shadow:0 8px 20px #204f6a0b}
.scene-app span{font-size:14px;letter-spacing:.03em;color:#375c72;font-weight:700;background:#ffffffd9;border-radius:99px;padding:3px 10px}
.app-calen{left:40px;top:20px;animation-delay:-2s}
.app-rain{left:-35px;top:190px;animation-delay:-4s}
.app-taskun{left:500px;top:350px;animation-delay:-1s}
@keyframes app-bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(4deg)}}
.scene-spark{position:absolute;font-family:Arial,sans-serif;font-weight:800;line-height:1;color:#ffb83a;z-index:2;pointer-events:none;animation:spark-turn 9s ease-in-out infinite}
.spark-one{font-size:47px;left:390px;top:15px;transform:rotate(15deg)}
.spark-two{font-size:28px;right:15px;top:10px;color:#21aec1;animation-delay:-4s}
@keyframes spark-turn{0%,100%{transform:rotate(0) scale(.85)}50%{transform:rotate(90deg) scale(1.05)}}
.scene-dot{position:absolute;width:13px;height:13px;border-radius:50%;background:#19abc6;z-index:2;pointer-events:none}
.dot-one{left:92px;top:348px;background:#ffb941}
.dot-two{right:115px;bottom:10px;background:#397fee;width:8px;height:8px}
.scene-mail{position:absolute;right:12px;top:45px;width:560px;background:#fff;border:1px solid #e1e8ed;border-radius:27px;padding:25px 28px;box-shadow:0 18px 50px #42657d20;z-index:4;transform:rotate(2deg);transition:box-shadow .4s,border-color .4s}
.scene-mail-top{display:flex;align-items:center;gap:10px}
.scene-mail-icon{display:grid;place-items:center;width:39px;height:39px;background:#e9f5ff;border-radius:11px;color:#0785cf;flex-shrink:0}
.scene-mail-icon svg,.node-glyph svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.7}
.scene-mail-top>span:nth-child(2){font-size:14px;font-weight:700;line-height:1.5;color:#294658}
.scene-mail-top small{font-size:14px;color:#8397a3;display:block;font-weight:400;margin-top:3px}
.scene-status{margin-left:auto;font-size:14px;line-height:1.5;min-width:58px;text-align:center;border-radius:99px;padding:6px 11px;background:#fff0d9;color:#a46c13;transition:background .3s,color .3s;white-space:nowrap}
.hero .scene-subject{font-size:21px;line-height:1.6;margin:20px 0 5px;letter-spacing:0;color:#243746;white-space:normal}
.scene-sender{font-size:14px;color:#8b9aa6}
.scene-assignee{display:flex;align-items:center;gap:12px;margin:22px 0 0;padding:15px 16px;background:#f4f7fa;border:1px solid #e9edf1;border-radius:13px}
.scene-assignee>span:first-child{width:35px;height:35px;display:grid;place-items:center;background:#e5edf3;color:#7b919f;border-radius:50%;font-size:14px;transition:background .4s,color .4s}
.scene-assignee small{font-size:14px;display:block;color:#8195a1;margin-bottom:2px}
.scene-assignee b{font-size:14px;display:block;color:#344f61}
.scene-check{margin-left:auto;font-size:20px;color:#159b7d;opacity:0;transform:scale(.2);transition:transform .4s,opacity .4s}
.scene-message{font-size:14px;color:#5b7485;margin:15px 0 14px;min-height:21px}
.scene-progress{display:flex;gap:5px}
.scene-progress i{display:block;flex:1;height:3px;background:#e7edf1;border-radius:5px;transition:background .5s}
.scene-progress i.current{background:#168bce}
[data-scene-state="1"] .scene-status{color:#1373ad;background:#e7f5fd}
[data-scene-state="1"] .scene-assignee>span:first-child,[data-scene-state="2"] .scene-assignee>span:first-child{background:#dceefa;color:#087fc0}
[data-scene-state="2"] .scene-status{color:#138468;background:#dff5ec}
[data-scene-state="2"] .scene-check{opacity:1;transform:scale(1)}
[data-scene-state="2"] .scene-progress i.current{background:#22a383}
.scene-flow{position:absolute;right:16px;bottom:32px;display:flex;align-items:center;gap:8px;z-index:5;min-height:57px;background:#ffffffd9;border:1px solid #e2eaf0;border-radius:99px;padding:8px;box-shadow:0 8px 24px #294d6112}
.scene-flow button{display:flex;align-items:center;gap:7px;background:transparent;border:0;padding:11px 14px;border-radius:99px;color:#607785;font-size:14px;white-space:nowrap;transition:background .3s,color .3s;min-height:42px}
.scene-flow button>span{font:700 14px/1 Arial,sans-serif;color:#8ba2af}
.scene-flow button.active{background:#173d55;color:white}
.scene-flow button.active>span{color:#8dd6ff}
.scene-flow>b{font-size:14px;color:#91a4ae;font-weight:400}
.motion-control{position:absolute;right:21px;bottom:-5px;padding:6px 11px;display:flex;align-items:center;gap:7px;background:#ffffffab;border:1px solid #d7e1e7;border-radius:99px;color:#5c7888;font-size:14px;z-index:6;min-height:30px}
.motion-control b{font-weight:400}.motion-control>span{font-size:14px;font-family:Arial,sans-serif}
.hero-points{margin-top:24px}
.hero-suite{position:relative;z-index:4}
.connect-section{margin:28px 20px 0;border-radius:42px;background:#4462da;color:white;position:relative;overflow:hidden;padding:70px 0}
.connect-section:before,.connect-section:after{content:"";position:absolute;inset:auto -160px -460px auto;width:950px;height:950px;border:90px solid #ffffff0b;border-radius:45%;transform:rotate(30deg);pointer-events:none}
.connect-section:after{right:-300px;bottom:-350px;border-width:55px;width:680px;height:680px;transform:rotate(15deg)}
.connect-grid{display:grid;grid-template-columns:.85fr 1fr;gap:65px;align-items:center;position:relative;z-index:1}
.connect-copy h2{font-size:45px;line-height:1.6;color:#fff;letter-spacing:-.03em}
.connect-copy .eyebrow{color:#d3e3ff;font-size:14px;letter-spacing:.17em}
.connect-copy>p:not(.eyebrow){color:#e1e8ff;font-size:14px;line-height:2.2;margin-top:23px}
.connect-copy .button{margin-top:25px;font-size:14px;padding:16px 24px;gap:23px}
.connect-copy>small{display:block;color:#d4ddff;font-size:14px;margin-top:17px}
.connect-map{position:relative;width:min(100%,480px);aspect-ratio:1;margin:auto}
.connect-lines{position:absolute;inset:0;width:100%;height:100%;stroke:#ffffff58;stroke-width:1.5}
.connect-lines circle{stroke-dasharray:5 11;animation:orbit-dash 28s linear infinite;transform-origin:center}
.connect-lines path{stroke-dasharray:3 8;stroke:#ffffff25}
@keyframes orbit-dash{to{stroke-dashoffset:-500;transform:rotate(30deg)}}
.connect-center{position:absolute;inset:20%;display:grid;place-items:center;border-radius:50%;background:#ffffff14;border:1px solid #ffffff28;box-shadow:0 0 0 20px #ffffff08}
.connect-center img{position:absolute;width:146%;max-width:none;top:-20%;left:-20%;filter:drop-shadow(0 15px 20px #263a741f);animation:concept-bob 7s ease-in-out infinite}
@keyframes concept-bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(3deg)}}
.connect-node{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:110px;height:110px;background:#fff;border:1px solid #e4eafa;border-radius:50%;box-shadow:0 10px 24px #293d8b18;transition:transform .3s;color:#314458;z-index:2}
.connect-node:hover{transform:translateY(-6px) scale(1.03)}
.connect-node img{width:34px;height:34px;object-fit:contain}
.connect-node b{font-size:14px}.connect-node small{font-size:14px;color:#8a9bae;line-height:1.3}
.node-glyph{height:34px;display:grid;place-items:center;color:#426dc9}.node-glyph svg{width:31px;height:31px;stroke-width:1.6}
.node-mail{top:0;left:calc(50% - 55px)}
.node-share{left:0;top:calc(50% - 55px)}
.node-calen{right:0;top:calc(50% - 55px)}
.node-taskun{bottom:0;left:calc(50% - 55px)}
.feature-showcase{position:relative;isolation:isolate;margin-top:60px;overflow:visible}
.feature-peek{position:absolute;width:255px;max-width:none;right:-23px;top:-153px;z-index:-1;pointer-events:none;transform:rotate(15deg)}
.feature-section>.wrap>.split-heading{margin-bottom:0}
.feature-section{overflow:hidden}
.voice-card,.option-cards article,.problems article{transition:transform .35s,box-shadow .35s}
.voice-card:hover,.option-cards article:hover{transform:translateY(-5px);box-shadow:0 16px 30px #153c5110}
.js-motion .reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.65,.25,1);transition-delay:var(--reveal-delay,0ms)}
.js-motion .reveal.is-visible{opacity:1;transform:none}
.motion-paused .mascot-float,.motion-paused .scene-app,.motion-paused .scene-spark,.motion-paused .connect-lines circle,.motion-paused .connect-center img{animation-play-state:paused!important}
.motion-paused .reveal{transition-delay:0ms}
@media(max-width:1100px){
 .hero h1{font-size:51px}.mascot-scene{height:425px}.hero-mascot{width:590px;left:-50px;bottom:-88px}.scene-mail{width:480px;right:0;top:50px;padding:22px}.hero .scene-subject{font-size:19px}.scene-flow{right:0;bottom:25px;gap:4px}.scene-flow button{font-size:14px;padding:10px 12px;gap:6px}.scene-flow>b{font-size:14px}.app-calen{left:8px;top:20px}.app-rain{left:-20px;top:180px}.app-taskun{left:380px;top:325px}.scene-app img{width:51px;height:51px;padding:11px}.scene-app span{font-size:14px}.spark-one{left:320px;font-size:40px;top:7px}.spark-two{top:10px;right:6px}.motion-control{right:5px;bottom:-9px}.connect-grid{gap:30px;grid-template-columns:.8fr 1fr}.connect-copy h2{font-size:38px}.connect-map{max-width:420px}.connect-node{width:98px;height:98px}.node-mail{left:calc(50% - 49px)}.node-share{top:calc(50% - 49px)}.node-calen{top:calc(50% - 49px)}.node-taskun{left:calc(50% - 49px)}
}
@media(max-width:800px){
 .hero{padding-top:36px}.hero h1{font-size:53px;line-height:1.3;white-space:normal}.hero h1 br{display:block}.hero-lead{font-size:14px;margin-top:16px}.hero .eyebrow{font-size:14px}.hero-actions{margin:20px 0 17px}.hero-actions .button{padding:15px 23px;font-size:14px;min-width:210px}.mascot-scene{height:460px;width:100%;margin-top:14px}.hero-mascot{width:520px;left:-60px;bottom:-65px}.scene-mail{width:405px;right:-5px;top:40px;padding:21px;border-radius:23px}.hero .scene-subject{font-size:17px;margin-top:16px}.scene-assignee{margin-top:15px;padding:12px}.scene-message{font-size:14px;margin:13px 0 12px}.scene-assignee b{font-size:14px}.scene-mail-top>span:nth-child(2){font-size:14px}.scene-mail-top small{font-size:14px}.scene-status{font-size:14px}.scene-flow{right:0;bottom:58px;gap:4px;padding:6px;border-radius:99px}.scene-flow button{font-size:14px;padding:10px 11px}.scene-flow button>span{font-size:14px}.scene-flow>b{font-size:14px}.scene-app img{width:47px;height:47px;padding:10px}.app-calen{top:6px;left:5px}.app-rain{top:175px;left:-16px}.app-taskun{top:auto;bottom:26px;left:340px}.spark-one{left:210px;top:3px;font-size:35px}.spark-two{right:-5px;font-size:24px}.motion-control{bottom:11px;right:4px;font-size:14px}.hero-points{margin-top:8px}.connect-section{margin:22px 14px 0;border-radius:35px;padding:60px 0}.connect-grid{grid-template-columns:1fr;gap:40px;text-align:center}.connect-copy h2{font-size:38px}.connect-copy>p:not(.eyebrow){font-size:14px;margin-top:20px}.connect-copy .button{margin-top:23px}.connect-map{width:410px;max-width:100%}.connect-copy>small{font-size:14px}.feature-showcase{margin-top:65px}.feature-peek{width:220px;right:-27px;top:-135px}
}
@media(max-width:560px){
 .hero{padding-top:25px}.hero .eyebrow{font-size:14px;margin-bottom:14px}.hero h1{font-size:clamp(36px,10.8vw,51px);line-height:1.32;letter-spacing:-.05em}.hero-lead{font-size:14px;line-height:1.9;margin-top:14px}.hero-actions{margin:18px 0 17px;gap:9px;flex-direction:row;flex-wrap:nowrap}.hero-actions .button{font-size:14px;min-width:0;padding:14px 15px;gap:12px}.hero-price strong{font-size:26px}.hero-price>span:first-child{font-size:14px}.hero-price>span:first-child small{font-size:14px}.hero-price .price-tax{font-size:14px}.hero-price .price-plus{font-size:14px}.hero-copy>.fine{font-size:14px;margin-top:8px}.mascot-scene{width:100%;height:470px;margin-top:12px}.hero-swoosh{width:750px;height:120px;left:-180px;top:170px;transform:rotate(-28deg)}.swoosh-two{left:-70px;top:290px;width:650px;height:80px}.hero-mascot{width:390px;left:-65px;bottom:42px}.scene-mail{width:275px;right:-10px;top:187px;padding:17px;border-radius:20px;transform:rotate(3deg);box-shadow:0 14px 35px #42657d1f}.scene-mail-top{gap:7px}.scene-mail-icon{width:29px;height:29px;border-radius:8px}.scene-mail-icon svg{width:20px;height:20px}.scene-mail-top>span:nth-child(2){font-size:14px}.scene-mail-top small{font-size:14px;margin-top:2px}.scene-status{min-width:45px;font-size:14px;padding:4px 7px}.hero .scene-subject{font-size:14px;line-height:1.6;margin:13px 0 4px}.scene-sender{font-size:14px}.scene-assignee{margin-top:12px;padding:9px 10px;gap:9px;border-radius:10px}.scene-assignee>span:first-child{width:27px;height:27px;font-size:14px}.scene-assignee small{font-size:14px}.scene-assignee b{font-size:14px}.scene-check{font-size:16px}.scene-message{font-size:14px;margin:11px 0 10px;min-height:16px}.scene-progress i{height:2px}.scene-flow{left:0;right:0;bottom:-9px;justify-content:center;gap:3px;padding:5px;border-radius:99px;min-height:48px}.scene-flow button{font-size:14px;padding:10px 9px;gap:5px;min-height:36px}.scene-flow button>span{font-size:14px}.scene-flow>b{font-size:14px}.motion-control{bottom:-51px;right:3px;font-size:14px;padding:5px 9px;min-height:28px}.scene-app img{width:42px;height:42px;padding:9px}.scene-app span{font-size:14px;padding:3px 7px}.app-calen{top:15px;left:4px}.app-rain{top:108px;left:-13px}.app-taskun{top:56px;bottom:auto;left:auto;right:12px}.spark-one{left:225px;top:121px;font-size:27px}.spark-two{right:95px;top:8px;font-size:22px}.dot-one{left:21px;top:310px;width:8px;height:8px}.dot-two{right:17px;bottom:5px;width:6px;height:6px}.hero-points{margin-top:78px}.hero-suite{padding-top:25px}.connect-section{margin:18px 10px 0;padding:50px 0;border-radius:28px}.connect-section>.wrap{width:calc(100% - 40px)}.connect-copy h2{font-size:31px;line-height:1.55}.connect-copy .eyebrow{font-size:14px;margin-bottom:15px}.connect-copy>p:not(.eyebrow){font-size:14px;line-height:2.1;margin-top:19px}.connect-copy .button{font-size:14px;padding:15px 21px;gap:20px}.connect-copy>small{font-size:14px;line-height:1.8;margin-top:14px}.connect-grid{gap:30px}.connect-map{width:300px}.connect-node{width:78px;height:78px;gap:3px}.connect-node img{width:26px;height:26px}.node-glyph{height:26px}.node-glyph svg{width:25px;height:25px}.connect-node b{font-size:14px}.connect-node small{font-size:14px}.node-mail{left:calc(50% - 39px)}.node-share{top:calc(50% - 39px)}.node-calen{top:calc(50% - 39px)}.node-taskun{left:calc(50% - 39px)}.connect-center{box-shadow:0 0 0 13px #ffffff08}.feature-showcase{margin-top:61px}.feature-peek{width:175px;right:-24px;top:-104px}.feature-copy .section-number{font-size:14px}.feature-section>.wrap>.split-heading h2{position:relative;z-index:1}.js-motion .reveal{transform:translateY(20px);transition-duration:.6s}
}
@media(max-width:360px){
 .hero h1{font-size:35px}.hero .eyebrow{font-size:14px}.hero-lead{font-size:14px}.hero-actions{flex-direction:column;gap:8px}.hero-actions .button{width:100%;font-size:14px;padding:14px 20px;justify-content:center;gap:25px}.hero-price .price-plus{font-size:14px}.hero-mascot{width:350px;left:-66px;bottom:51px}.mascot-scene{height:453px}.scene-mail{width:239px;right:-7px;top:181px;padding:15px}.hero .scene-subject{font-size:14px}.scene-mail-top>span:nth-child(2){font-size:14px}.scene-mail-top small{font-size:14px}.scene-status{font-size:14px;min-width:39px}.scene-flow{gap:2px;padding:5px}.scene-flow button{padding:10px 7px;gap:4px;font-size:14px}.scene-flow button>span{font-size:14px}.scene-flow>b{font-size:14px}.app-taskun{right:0;top:38px}.spark-one{left:195px;top:119px}.hero-points{margin-top:74px}.connect-copy h2{font-size:27px}.connect-map{width:260px}.connect-node{width:70px;height:70px}.node-mail{left:calc(50% - 35px)}.node-share{top:calc(50% - 35px)}.node-calen{top:calc(50% - 35px)}.node-taskun{left:calc(50% - 35px)}.connect-node b{font-size:14px}.connect-node small{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
 .mascot-float,.scene-app,.scene-spark,.connect-lines circle,.connect-center img{animation:none!important}
 .js-motion .reveal{opacity:1;transform:none;transition:none}
 .scene-mail,.scene-status,.scene-assignee>span:first-child,.scene-check,.scene-progress i,.scene-flow button{transition:none}
}

.motion-paused .reveal{opacity:1;transform:none;transition:none!important}

/* User-provided MailShare guides: original full figures, no raster edits. */
.mascot-scene{height:535px}
.hero-mascot.character-hero{width:385px;left:80px;bottom:-2px;filter:drop-shadow(0 18px 18px #183b5015)}
.character-hero img{animation:guide-breathe 7s ease-in-out infinite;transform-origin:50% 90%}
@keyframes guide-breathe{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-9px) rotate(.5deg)}}
.mascot-scene .scene-mail{top:85px}
.mascot-scene .scene-flow{bottom:67px}
.mascot-scene .motion-control{bottom:30px}
.mascot-scene .app-calen{left:5px;top:40px}
.mascot-scene .app-rain{left:-15px;top:248px}
.mascot-scene .app-taskun{left:455px;top:390px}
.mascot-scene .spark-one{left:420px;top:20px}
.character-mid-cta{padding:60px 0 50px;text-align:left}
.character-mid-cta .guide-layout{display:grid;grid-template-columns:290px 1fr;align-items:center;gap:50px;max-width:970px;background:#f0f6fa;border-radius:36px;padding:30px 50px 0;position:relative;isolation:isolate}
.character-mid-cta .guide-layout:before{content:"";position:absolute;left:13px;top:45px;width:310px;height:310px;border-radius:50%;background:#e0edf8;z-index:-1}
.guide-wave{width:230px;height:auto;display:block;justify-self:center;align-self:end}
.character-mid-cta .guide-layout>.guide-message{display:block;margin:0;padding:0 0 30px;width:100%;max-width:none}
.character-mid-cta h2{font-size:30px;line-height:1.65;margin-top:9px}
.character-mid-cta p{font-size:14px;color:#57717f}
.character-mid-cta .guide-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.character-mid-cta .button{font-size:14px;min-width:208px;padding:16px 20px}
.consultation-visual{display:flex;align-items:center;gap:10px;position:relative;margin-top:25px;max-width:430px}
.consultation-visual img{height:300px;width:auto;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 14px 16px #051e3333)}
.consultation-visual p{font-size:14px;line-height:2.1;background:#ffffff0d;border:1px solid #ffffff22;padding:18px 20px;border-radius:20px;color:#dbeeff;margin:0;white-space:nowrap}
@media(max-width:1100px) and (min-width:801px){
 .hero-mascot.character-hero{width:350px;left:0;bottom:4px}.mascot-scene{height:520px}.mascot-scene .scene-mail{width:460px;top:90px}.mascot-scene .app-taskun{left:330px;top:386px}.mascot-scene .app-calen{left:-30px}.mascot-scene .app-rain{left:-30px;top:285px}.character-mid-cta .guide-layout{gap:20px;padding:25px 30px 0;grid-template-columns:240px 1fr}.character-mid-cta h2{font-size:26px}.consultation-visual{gap:0}.consultation-visual img{height:270px}.consultation-visual p{font-size:14px;padding:14px}
}
@media(max-width:800px){
 .mascot-scene{height:510px}.hero-mascot.character-hero{width:320px;left:-36px;bottom:0}.mascot-scene .scene-mail{width:375px;top:120px}.mascot-scene .scene-flow{bottom:60px}.mascot-scene .motion-control{bottom:19px}.mascot-scene .app-calen{left:-16px;top:11px}.mascot-scene .app-rain{left:-20px;top:264px}.mascot-scene .app-taskun{left:266px;top:404px}.mascot-scene .spark-one{left:290px;top:34px}.character-mid-cta .guide-layout{grid-template-columns:180px 1fr;gap:15px;padding:25px 25px 0}.guide-wave{width:180px}.character-mid-cta .guide-layout:before{width:210px;height:210px;left:0;top:35px}.character-mid-cta h2{font-size:24px}.character-mid-cta .guide-actions{gap:8px}.character-mid-cta .button{min-width:205px}.consultation-visual{max-width:450px;margin:20px auto 0;justify-content:center}.consultation-visual img{height:290px}.consultation-visual p{font-size:14px;padding:16px}
}
@media(max-width:560px){
 .mascot-scene{height:710px;margin-top:20px}.hero-mascot.character-hero{width:285px;left:calc(50% - 155px);bottom:auto;top:0}.character-hero img{animation-duration:8s}.mascot-scene .scene-mail{width:calc(100% - 12px);right:3px;top:435px;transform:rotate(2deg)}.mascot-scene .scene-flow{bottom:-3px}.mascot-scene .motion-control{bottom:-43px}.mascot-scene .app-calen{left:0;top:112px}.mascot-scene .app-rain{left:-10px;top:248px}.mascot-scene .app-taskun{left:auto;right:0;top:261px}.mascot-scene .spark-one{left:auto;right:5px;top:35px}.mascot-scene .spark-two{right:auto;left:9px;top:15px}.mascot-scene .dot-one{top:338px}.hero-points{margin-top:70px}.character-mid-cta{padding:35px 0}.character-mid-cta .guide-layout{width:calc(100% - 28px);display:flex;flex-direction:column-reverse;gap:10px;padding:30px 18px 0;border-radius:28px;overflow:hidden;text-align:center}.character-mid-cta .guide-layout>.guide-message{padding:0}.character-mid-cta h2{font-size:26px}.character-mid-cta p{font-size:14px}.character-mid-cta .guide-actions{justify-content:center;gap:9px;margin-top:20px}.character-mid-cta .button{min-width:0;width:100%;font-size:14px;justify-content:center;padding:15px 20px}.guide-wave{width:190px;align-self:center}.character-mid-cta .guide-layout:before{width:260px;height:260px;top:auto;bottom:-30px;left:calc(50% - 130px)}.consultation-visual{gap:0;justify-content:flex-start;margin-top:20px}.consultation-visual img{height:265px;margin-left:-12px}.consultation-visual p{font-size:14px;padding:12px 10px;white-space:normal;margin-left:-13px}
}
@media(max-width:360px){
 .hero-mascot.character-hero{width:259px;left:calc(50% - 140px)}.mascot-scene{height:675px}.mascot-scene .scene-mail{top:400px}.mascot-scene .app-rain{top:241px}.mascot-scene .app-taskun{top:247px}.consultation-visual img{height:230px}.consultation-visual p{font-size:14px;padding:10px 8px}.character-mid-cta h2{font-size:24px}
}
@media(prefers-reduced-motion:reduce){.character-hero img{animation:none!important}}

/* First screen: copy and character together; workflow follows as a separate demo. */
.hero{padding:0 0 0;overflow:hidden}
.hero .hero-grid{position:relative;display:flex;min-height:625px;flex-direction:row;align-items:center;gap:0}
.hero .hero-copy{width:55%;text-align:left;position:relative;z-index:5;padding:35px 0}
.hero .eyebrow{font-size:14px;justify-content:flex-start;margin-bottom:24px}
.hero h1{font-size:clamp(48px,4.7vw,68px);line-height:1.38;white-space:normal;letter-spacing:-.045em}
.hero h1 br{display:block}.hero h1 em{white-space:nowrap}
.hero .hero-lead{font-size:14px;line-height:2.1;margin-top:23px}
.hero .hero-actions{justify-content:flex-start;gap:12px;margin:26px 0 21px;flex-wrap:wrap}
.hero .hero-actions .button{min-width:206px;padding:17px 22px;font-size:14px;gap:20px}
.hero .hero-price{justify-content:flex-start;gap:8px;max-width:540px}
.hero .hero-price .price-plus{flex-basis:100%;padding:0;border:0;margin-top:5px;font-size:14px}
.hero .hero-copy>.fine{font-size:14px;margin-top:9px}
.hero .hero-art{position:absolute;right:-85px;top:0;width:750px;max-width:none;height:625px;margin:0;padding:0;overflow:hidden;isolation:isolate;pointer-events:none}
.hero .hero-art .character-hero{width:720px;left:4px;top:18px;bottom:auto;z-index:3}
.hero-art:after{content:"";position:absolute;left:0;right:0;bottom:0;height:80px;background:linear-gradient(transparent,#eaf0f5);z-index:4}
.hero-art .hero-swoosh{left:90px;top:370px;width:920px;height:155px;transform:rotate(-30deg)}
.hero-art .swoosh-two{left:30px;top:530px;opacity:.65}
.hero-art .app-calen{left:90px;top:40px}.hero-art .app-rain{left:68px;top:470px}.hero-art .app-taskun{left:auto;right:20px;top:455px}
.hero-art .spark-one{left:260px;top:34px}.hero-art .spark-two{right:15px;top:275px}.hero-art .dot-one{left:145px;top:355px}
.hero .hero-points{margin-top:0;position:relative;z-index:5}.hero .hero-suite{padding-bottom:30px}
.workflow-preview{padding:35px 0 10px}
.workflow-demo.mascot-scene{height:355px;width:1160px;max-width:calc(100% - 80px);margin:0 auto;border-radius:34px;background:#f4f7fa;overflow:hidden;padding:42px}
.workflow-title{position:absolute;left:42px;top:50px;width:37%}.workflow-title h2{font-size:30px;line-height:1.65;letter-spacing:-.025em}.workflow-title>p:last-child{font-size:14px;line-height:2.1;color:#6d8492;margin-top:16px}
.workflow-demo .scene-mail{top:30px;right:32px;width:54%;transform:none;padding:22px 25px;border-radius:22px;box-shadow:0 10px 30px #31516a0b}
.workflow-demo .scene-subject{font-size:20px;line-height:1.6;margin:16px 0 5px;color:#243746}
.workflow-demo .scene-assignee{margin-top:16px;padding:12px 15px}
.workflow-demo .scene-message{margin:12px 0}.workflow-demo .scene-flow{left:40px;right:auto;bottom:33px;gap:4px;padding:5px;min-height:45px;box-shadow:none}
.workflow-demo .scene-flow button{font-size:14px;gap:4px;padding:9px;min-height:35px}.workflow-demo .scene-flow button>span{font-size:14px}.workflow-demo .scene-flow>b{font-size:14px}
.workflow-demo .motion-control{right:40px;bottom:18px}
.comparison-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:25px}
.comparison-card{border:1px solid #dae5eb;border-radius:22px;overflow:hidden;background:#fff}
.comparison-card h3{font-size:14px;line-height:1.7;padding:17px 22px;margin:0;border-bottom:1px solid #e3eaf0;font-weight:700;color:#2d4757}
.comparison-card h3 br{display:none}.comparison-card h3 br:after{content:"・"}
.comparison-card dl{display:grid;grid-template-columns:1fr 1fr;margin:0}
.comparison-card dl>div{padding:19px 22px 23px;min-width:0}
.comparison-card dl>div+div{border-left:1px solid #e3eaf0}
.comparison-card .compare-ours{background:#edf7fe}
.comparison-card dt{font-size:14px;font-weight:700;color:#546e7e;line-height:1.8}
.comparison-card dt small{display:block;font-size:14px;font-weight:400;color:#7c919e;margin-top:2px}
.comparison-card dd{margin:13px 0 0;font-size:18px;font-weight:700;line-height:1.6;letter-spacing:-.02em;color:#334d5e}
.comparison-card .compare-ours dt,.comparison-card .compare-ours dd{color:#0782b7}
@media(max-width:1100px) and (min-width:801px){
 .hero .hero-grid{min-height:600px}.hero .hero-copy{width:58%}.hero h1{font-size:54px}.hero .hero-art{right:-150px;width:680px;height:600px}.hero .hero-art .character-hero{width:640px;top:22px}.hero .hero-actions{gap:9px}.hero .hero-actions .button{min-width:190px;padding:16px 17px;font-size:14px}.hero .hero-lead{font-size:14px}.hero-art .app-rain{left:102px}.workflow-demo.mascot-scene{height:370px}.workflow-title{width:35%}.workflow-title h2{font-size:25px}.workflow-demo .scene-flow{left:25px;gap:2px}.workflow-demo .scene-flow button{font-size:14px;padding:8px 6px}.workflow-demo .scene-mail{right:23px;width:55%}
}
@media(max-width:800px){
 .hero .hero-grid{min-height:610px}.hero .hero-copy{width:62%;padding:35px 0}.hero h1{font-size:46px}.hero .eyebrow{font-size:14px;line-height:1.8;max-width:260px;margin-bottom:20px}.hero .hero-lead{font-size:14px}.hero .hero-art{width:540px;right:-190px;height:610px}.hero .hero-art .character-hero{width:540px;top:65px}.hero .hero-actions{flex-direction:column;align-items:flex-start}.hero .hero-actions .button{min-width:205px;font-size:14px;padding:15px 18px}.hero .hero-price{justify-content:flex-start;max-width:280px}.hero .hero-price .price-plus{font-size:14px}.hero .hero-copy>.fine{max-width:260px;line-height:1.9}.hero-art .app-calen{left:100px;top:30px}.hero-art .app-rain{left:110px;top:490px}.hero-art .app-taskun{right:40px;top:400px}.hero-art .spark-one{left:220px;top:38px}.hero-art .spark-two{display:none}.workflow-demo.mascot-scene{width:calc(100% - 50px);max-width:none;height:590px;padding:30px}.workflow-title{left:30px;top:30px;width:auto}.workflow-title h2{font-size:26px}.workflow-title h2 br{display:none}.workflow-title>p:last-child{margin-top:10px;font-size:14px}.workflow-demo .scene-mail{top:200px;left:25px;right:25px;width:auto}.workflow-demo .scene-flow{left:25px;right:25px;bottom:52px;justify-content:center}.workflow-demo .motion-control{bottom:13px;right:25px}.comparison-cards{gap:13px}.comparison-card h3{font-size:14px;padding:14px 16px}.comparison-card dl>div{padding:16px}.comparison-card dt{font-size:14px}.comparison-card dt small{font-size:14px}.comparison-card dd{font-size:15px}
}
@media(max-width:560px){
 .hero .hero-grid{width:calc(100% - 36px);min-height:615px;align-items:flex-start}.hero .hero-copy{width:100%;padding:30px 0 18px}.hero .eyebrow{font-size:14px;max-width:none;margin-bottom:18px}.hero h1{font-size:clamp(32px,9vw,48px);line-height:1.37;max-width:85%;position:relative;z-index:5}.hero .hero-lead{font-size:14px;line-height:2;max-width:62%;margin-top:22px}.hero .hero-lead br.mobile{display:none}.hero .hero-actions{margin:24px 0 20px;gap:9px;width:55%;flex-wrap:nowrap}.hero .hero-actions .button{min-width:0;width:100%;padding:13px 10px;font-size:14px;gap:6px;justify-content:center}.hero .hero-price{max-width:53%;gap:4px}.hero .hero-price>span:first-child{font-size:14px}.hero .hero-price>span:first-child small{font-size:14px}.hero .hero-price strong{font-size:27px}.hero .hero-price .price-tax{font-size:14px}.hero .hero-price .price-plus{font-size:14px;line-height:1.9;margin-top:8px}.hero .hero-price .price-plus>span{display:none}.hero .hero-copy>.fine{max-width:51%;font-size:14px;line-height:1.9;margin-top:9px}.hero .hero-art{width:450px;height:435px;right:-128px;top:180px}.hero .hero-art .character-hero{width:450px;left:0;top:0}.hero-art .app-calen,.hero-art .app-rain,.hero-art .app-taskun{display:none}.hero-art .hero-swoosh{left:140px;top:170px;width:500px;height:110px}.hero-art .swoosh-two{top:330px}.hero-art .spark-one{font-size:26px;left:180px;top:10px}.hero-art .dot-one{display:none}.hero-art:after{height:45px}.hero .hero-points{margin-top:0}.hero .hero-suite{padding:25px 0 30px}.workflow-preview{padding:25px 0 5px}.workflow-demo.mascot-scene{width:calc(100% - 28px);height:515px;border-radius:26px;padding:23px}.workflow-title{left:24px;top:25px;right:20px}.workflow-title .eyebrow{font-size:14px;margin-bottom:13px}.workflow-title h2{font-size:22px}.workflow-title h2 br{display:block}.workflow-title>p:last-child{font-size:14px;margin-top:10px;line-height:1.9}.workflow-demo .scene-mail{top:205px;left:14px;right:14px;width:auto;padding:17px;transform:none;border-radius:18px}.workflow-demo .scene-subject{font-size:14px;margin-top:13px}.workflow-demo .scene-assignee{margin-top:13px;padding:10px}.workflow-demo .scene-message{font-size:14px;margin:11px 0}.workflow-demo .scene-flow{left:12px;right:12px;bottom:48px;gap:2px;padding:4px;min-height:42px}.workflow-demo .scene-flow button{font-size:14px;padding:8px 7px;gap:4px;min-height:32px}.workflow-demo .scene-flow button>span{font-size:14px}.workflow-demo .scene-flow>b{font-size:14px}.workflow-demo .motion-control{right:17px;bottom:12px;min-height:26px}.comparison-cards{grid-template-columns:1fr;gap:13px;margin-top:20px}.comparison-card{border-radius:18px}.comparison-card h3{font-size:14px;padding:14px 17px}.comparison-card h3 br{display:block}.comparison-card dl>div{padding:16px 17px 20px}.comparison-card dt{font-size:14px}.comparison-card dt small{font-size:14px}.comparison-card dd{font-size:16px;margin-top:10px}
}
@media(max-width:360px){
 .hero .hero-grid{min-height:620px}.hero h1{font-size:31px;max-width:100%}.hero .hero-lead{font-size:14px;max-width:64%}.hero .hero-actions{width:58%;margin-top:20px}.hero .hero-actions .button{font-size:14px;padding:13px 8px}.hero .hero-art{right:-140px;width:420px;top:195px;height:425px}.hero .hero-art .character-hero{width:420px}.hero .hero-copy>.fine{font-size:14px}.hero .hero-price strong{font-size:25px}.hero .hero-price .price-plus{font-size:14px}.workflow-demo .scene-flow button{font-size:14px;padding:8px 5px}.workflow-demo .scene-subject{font-size:14px}.comparison-card dd{font-size:14px}
}

/* Character expressions belong to the problem and choice moments. */
.problem-intro{display:grid;grid-template-columns:1fr 225px;align-items:center;gap:35px;max-width:1050px;margin:0 auto 32px}
.problem-intro .section-intro{text-align:left;margin:0;padding:0}
.problem-intro .section-intro h2{font-size:38px;line-height:1.75}
.problem-intro .section-intro .eyebrow{font-size:14px}
.problem-guide{display:block;width:210px;height:auto;justify-self:center;filter:drop-shadow(0 9px 16px #254b6108)}
.pricing-guide-heading{display:flex;align-items:center;justify-content:space-between;gap:35px;margin-bottom:25px;padding:0 70px 0 12px;min-height:265px}
.pricing-guide-heading h2{font-size:42px;line-height:1.65;letter-spacing:-.03em}
.pricing-guide-heading>div>p:last-child{font-size:14px;line-height:2;color:#6b818e;margin-top:18px}
.pricing-guide-heading>img{display:block;width:205px;height:auto;flex-shrink:0;align-self:end}
@media(max-width:800px){
 .problem-intro{grid-template-columns:1fr 170px;gap:15px}.problem-guide{width:165px}.problem-intro .section-intro h2{font-size:27px}.problem-intro .section-intro .eyebrow{font-size:14px}.pricing-guide-heading{padding:0 15px;gap:20px;min-height:240px}.pricing-guide-heading h2{font-size:34px}.pricing-guide-heading>img{width:175px}.pricing-guide-heading>div>p:last-child{font-size:14px}
}
@media(max-width:560px){
 .problem-intro{display:block;position:relative;padding:0;margin-bottom:22px;min-height:235px}.problem-intro .section-intro{padding-top:10px;position:relative;z-index:2}.problem-intro .section-intro .eyebrow{font-size:14px;max-width:70%;line-height:1.9}.problem-intro .section-intro h2{font-size:23px;line-height:1.7;max-width:78%;margin-top:16px}.problem-guide{position:absolute;right:-6px;bottom:-10px;width:128px;opacity:.95;z-index:1}.problem-intro .section-intro h2 .accent{display:block;max-width:195px}.pricing-guide-heading{padding:0;gap:0;align-items:center;min-height:235px;margin-bottom:20px;position:relative}.pricing-guide-heading>div{width:70%;position:relative;z-index:2}.pricing-guide-heading h2{font-size:28px}.pricing-guide-heading .eyebrow{font-size:14px}.pricing-guide-heading>img{width:145px;position:absolute;right:-12px;bottom:0}.pricing-guide-heading>div>p:last-child{font-size:14px;max-width:80%;margin-top:14px}.pricing-guide-heading>div>p:last-child br{display:none}
}
@media(max-width:360px){
 .problem-intro .section-intro h2{font-size:20px}.problem-guide{width:112px;right:-7px}.problem-intro .section-intro h2 .accent{max-width:166px}.problem-intro{min-height:215px}.pricing-guide-heading h2{font-size:24px}.pricing-guide-heading>img{width:124px;right:-10px}.pricing-guide-heading>div>p:last-child{font-size:14px}.pricing-guide-heading{min-height:210px}
}