/* Reading sizes for the opened app. The page itself is styled in home.css. */
:root{--story-body:#536259}
.tour-player .tour-explainer{min-height:144px}.tour-player .tour-status{text-transform:none;letter-spacing:0;font-size:15px;font-weight:600}.tour-player .tour-count{font-size:15px}
.tour-player .tour-explainer h3{font-size:27px;line-height:1.18;letter-spacing:-.65px;margin:12px 0 10px}.tour-player .tour-explainer p{font-size:20px;line-height:1.5;color:var(--story-body)}
.tour-player .tour-controls button{min-width:40px;min-height:44px}.tour-player .tour-toggle{width:44px;height:44px}.tour-player .tour-controls{gap:5px}
/* Opening the app restores readable native-sized text while the inline phone stays compact. */
@media(min-width:801px){
  .preview-open[data-platform=ios] .preview-stage{grid-template-columns:minmax(0,390px) minmax(0,420px);column-gap:64px;padding-top:60px}
  .preview-open[data-platform=ios] .phone.native{zoom:1;width:390px;max-width:100%;height:min(820px,calc(100dvh - 190px));border-radius:36px}
  .preview-open[data-platform=ios] .tour-player{width:420px;max-width:100%}
  .preview-open[data-platform=ios] .tour-explainer{min-height:240px}
  .preview-open[data-platform=ios] .tour-explainer h3{font-size:38px;line-height:1.12;margin:17px 0 18px}
  .preview-open[data-platform=ios] .tour-explainer p{font-size:22px;line-height:1.55}
  .preview-open[data-platform=ios] .preview-disclosure{font-size:13px}
}
.preview-open[data-platform=macos] .tour-player{max-width:760px;width:min(760px,100%);padding-top:10px}.preview-open[data-platform=macos] .tour-explainer{min-height:125px}.preview-open[data-platform=macos] .tour-explainer p{max-width:none;font-size:20px}.preview-open[data-platform=macos] .phone.native.mac{min-height:0}.preview-open[data-platform=macos] .preview-disclosure{font-size:13px}
.preview-open .native :is(.n-body-copy,.n-story-line,.n-hero-text){font-size:16px}.preview-open .native .n-demo-note{font-size:13px;line-height:1.5}.preview-open .native .n-home-tile strong{font-size:18px}.preview-open .native .n-caption{font-size:14px}.preview-open .native .n-home-tile small{font-size:12px}.preview-open .native .n-chart .chart-readout{font-size:12px}
@media(min-width:801px) and (max-width:1100px){
  .preview-open[data-platform=ios] .preview-stage{grid-template-columns:minmax(0,340px) minmax(0,320px);column-gap:34px}.preview-open[data-platform=ios] .phone.native{width:340px}.preview-open[data-platform=ios] .tour-player{width:320px}.preview-open[data-platform=ios] .tour-explainer h3{font-size:32px}.preview-open[data-platform=ios] .tour-explainer p{font-size:21px}
}
@media(max-width:800px){
  .tour-player .tour-explainer h3{font-size:26px}.tour-player .tour-explainer p{font-size:18px}.tour-player .tour-explainer{min-height:145px}
  .preview-open .tour-player,.preview-open[data-platform=macos] .tour-player{padding:10px 16px 8px}.preview-open .tour-explainer,.preview-open[data-platform=macos] .tour-explainer{min-height:144px;max-height:190px;overflow:auto}.preview-open .tour-explainer h3,.preview-open[data-platform=macos] .tour-explainer h3{font-size:23px;margin:8px 0}.preview-open .tour-explainer p,.preview-open[data-platform=macos] .tour-explainer p{font-size:18px;line-height:1.4}.preview-open .tour-status,.preview-open .tour-count{font-size:14px}.preview-open .preview-disclosure,.preview-open[data-platform=macos] .preview-disclosure{font-size:12px;margin:7px 10px 0}.preview-open .mobile-close{font-size:14px;padding:7px 10px}.preview-open .preview-stage,.preview-open[data-platform=macos] .preview-stage{padding-top:50px}.preview-open .stage-top{max-width:calc(100% - 150px);left:12px;top:12px}.preview-open .stage-top .preview-label{font-size:12px}
}
@media(max-width:360px){.preview-open .tour-explainer h3{font-size:22px}.preview-open .tour-explainer p,.preview-open[data-platform=macos] .tour-explainer p{font-size:17px}.preview-open .tour-explainer,.preview-open[data-platform=macos] .tour-explainer{min-height:144px;max-height:164px}.preview-label{font-size:13px}}