.mode-breadcrumb{display:flex;gap:12px;align-items:center;padding-block:25px;color:var(--muted);font-size:13px}
.mode-breadcrumb a:hover{text-decoration:underline;text-underline-offset:5px}
.mode-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:90px;align-items:center;padding-block:30px 75px;min-height:580px}
.mode-hero h1,.mode-audio-intro h1,.mode-immersive-intro h1{font-size:clamp(42px,5.3vw,68px);line-height:1.08;letter-spacing:-.035em;max-width:850px}
.mode-hero p,.mode-audio-intro>p,.mode-immersive-intro>p{font-size:18px;line-height:1.8;max-width:590px;color:var(--muted)}
.mode-hero .download-button{margin-top:16px}
.mode-page .mode-small{font-size:14px;line-height:1.85;color:var(--muted);max-width:70ch}
.mode-phone{margin:0;display:grid;justify-items:center;gap:16px;min-width:0}
.mode-phone img{width:238px;border:4px solid #77917e;border-radius:28px;background:#faf7f2}
.mode-phone figcaption,.mode-tablet figcaption{font-size:13px;color:var(--muted);line-height:1.7;text-align:center;max-width:34ch}
.mode-spread{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:center;padding-block:85px;border-top:1px solid var(--line)}
.mode-spread>div>p,.mode-note-section>div>p,.mode-diagram-section>p,.mode-route>div>p{font-size:17px;line-height:1.85;color:var(--muted);max-width:66ch}
.mode-spread h2,.mode-note-section h2,.mode-diagram-section h2,.mode-route h2{font-size:clamp(36px,4vw,50px);letter-spacing:-.03em}
.mode-page .text-link{font-size:14px;margin-top:16px}
.mode-note-section{display:grid;grid-template-columns:1fr 1fr;gap:90px;padding-block:85px;border-top:1px solid var(--line)}
.mode-note-section>h2{max-width:480px}
.mode-note-section .mode-flow{margin-block:32px}
.mode-diagram-section{padding-block:85px;border-top:1px solid var(--line)}
.mode-diagram-section>.mode-small{margin-top:26px}
.mode-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;list-style:none;padding:0;margin:40px 0 20px}
.mode-flow li{position:relative;min-width:0;padding:25px 14px;border-block:1px solid var(--line);font-size:16px;line-height:1.6;text-align:center;color:var(--heading)}
.mode-flow li+li::before{content:'';position:absolute;top:50%;left:-32px;width:30px;border-top:1px solid var(--muted)}
.mode-flow li+li::after{content:'';position:absolute;top:calc(50% - 3px);left:-8px;width:6px;height:6px;border-top:1px solid var(--muted);border-right:1px solid var(--muted);transform:rotate(45deg)}
.mode-audio-intro,.mode-immersive-intro{text-align:center;padding-block:35px 55px}
.mode-audio-intro h1,.mode-audio-intro>p,.mode-immersive-intro h1,.mode-immersive-intro>p{margin-inline:auto}
.mode-audio-intro>.download-button,.mode-immersive-intro>.download-button{margin-top:12px}
.mode-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;align-items:start;padding-block:0 80px}
.mode-gallery .mode-phone:nth-child(2){padding-top:55px}
.mode-gallery .mode-phone:nth-child(3){padding-top:110px}
.mode-gallery .mode-phone img{width:min(100%,245px)}
.mode-route{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;padding-block:85px;border-top:1px solid var(--line)}
.mode-route-image{width:100%;height:440px;object-fit:cover;object-position:65% center;border-radius:16px}
.mode-route .mode-flow{gap:18px}
.mode-route .mode-flow li{font-size:14px;padding-inline:4px}
.mode-route .mode-flow li+li::before{left:-18px;width:17px}
.mode-route .mode-flow li+li::after{left:-7px}
.mode-tablet{display:grid;justify-items:center;gap:18px;margin:45px auto 15px;max-width:580px}
.mode-tablet img{width:440px;border:5px solid #77917e;border-radius:22px;background:#faf7f2}
.mode-related{padding-block:60px;border-top:1px solid var(--line)}
.mode-related h2{font-size:32px;letter-spacing:-.025em}
.mode-related>div{display:flex;flex-wrap:wrap;gap:18px 50px}
.mode-related a{display:flex;gap:20px;align-items:center;font-size:18px;min-height:44px}
.mode-related a:hover span{transform:translate(3px,-3px)}
.mode-related a span{transition:transform 180ms ease}
.mode-detail-link{display:block;font-size:14px;font-weight:550;text-decoration:underline;text-underline-offset:5px;margin-top:18px;min-height:32px}
.feature-links{display:flex;flex-wrap:wrap;gap:18px 30px;padding-block:14px;font-size:14px}
.feature-links a:hover{text-decoration:underline;text-underline-offset:5px}
@media(max-width:1000px){.mode-hero,.mode-spread,.mode-note-section{gap:50px}.mode-route{gap:35px}.mode-gallery{gap:24px}.mode-hero h1{font-size:48px}.mode-flow{gap:25px}.mode-flow li+li::before{left:-25px;width:23px}}
@media(max-width:767px){.mode-breadcrumb{padding-block:20px;font-size:12px}.mode-hero{grid-template-columns:1fr;gap:35px;padding-block:20px 50px;min-height:0}.mode-hero h1,.mode-audio-intro h1,.mode-immersive-intro h1{font-size:42px}.mode-hero p,.mode-audio-intro>p,.mode-immersive-intro>p{font-size:16px}.mode-phone img{width:220px}.mode-spread{grid-template-columns:1fr;gap:35px;padding-block:55px}.mode-spread>figure{order:2}.mode-note-section{grid-template-columns:1fr;gap:15px;padding-block:55px}.mode-spread h2,.mode-note-section h2,.mode-diagram-section h2,.mode-route h2{font-size:36px}.mode-spread>div>p,.mode-note-section>div>p,.mode-diagram-section>p,.mode-route>div>p{font-size:16px}.mode-diagram-section{padding-block:55px}.mode-flow{grid-template-columns:1fr;gap:26px;margin-top:28px}.mode-flow li{padding:20px 16px;font-size:16px}.mode-flow li+li::before{top:-26px;left:50%;width:0;height:24px;border-top:0;border-left:1px solid var(--muted)}.mode-flow li+li::after{top:-9px;left:calc(50% - 2px);transform:rotate(135deg)}.mode-gallery{grid-template-columns:1fr;gap:35px;padding-bottom:55px}.mode-gallery .mode-phone:nth-child(n){padding-top:0}.mode-gallery .mode-phone img{width:220px}.mode-audio-intro,.mode-immersive-intro{padding-block:20px 35px;text-align:left}.mode-route{grid-template-columns:1fr;padding-block:55px}.mode-route-image{height:280px}.mode-route .mode-flow{gap:26px}.mode-route .mode-flow li{font-size:16px}.mode-route .mode-flow li+li::before{left:50%;width:0}.mode-route .mode-flow li+li::after{left:calc(50% - 2px)}.mode-tablet{margin-top:35px}.mode-tablet img{width:100%;border-width:3px;border-radius:16px}.mode-related{padding-block:40px}.mode-related h2{font-size:29px}.mode-related>div{gap:12px 32px}.mode-related a{font-size:16px}.feature-links{gap:15px 25px}}
@media(prefers-reduced-motion:reduce){.mode-related a span{transition:none}.mode-related a:hover span{transform:none}}