/* The public Builder preview: official model, clear modes, no private-app link. */
.book-app-link { display:inline-flex; align-items:center; gap:16px; margin-top:22px; padding-block:10px; border-bottom:2px solid var(--aqua); font-size:19px; }
.book-app-link span { font-size:25px; }
.app-spotlight { position:relative; padding:65px 0 110px; overflow:hidden; background:var(--night); color:#fff8e7; }
.app-spotlight [hidden] { display:none !important; }
.app-intro { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:50px; margin-bottom:55px; padding-top:48px; border-top:1px solid #bfa4c94d; }
.app-intro h2 { font-size:clamp(78px,8.3vw,114px); color:var(--coral); line-height:.92; letter-spacing:-.03em; }
.app-intro h2>span:first-child { display:block; font-size:clamp(28px,3vw,39px); letter-spacing:0; line-height:1.2; color:var(--aqua); margin-bottom:11px; }
.app-intro h2 .app-title-dot { color:var(--yellow); }
.app-lead { font:700 clamp(29px,3vw,40px)/1.12 var(--font-display); color:var(--lavender); }
.app-lead span { color:var(--yellow); }
.app-description { margin-top:18px; color:#fff8e7; font-size:23px; line-height:1.4; }
.app-grid { display:grid; grid-template-columns:minmax(250px,.83fr) minmax(0,2fr); gap:50px; align-items:center; }
.app-modes-label { font-size:20px; color:var(--lavender); margin-bottom:17px; }
.app-preview-controls { display:flex; flex-direction:column; gap:12px; }
.app-preview-controls button { display:flex; align-items:center; gap:14px; min-height:66px; padding:14px 19px; border:2px solid var(--lavender); border-radius:17px; background:transparent; color:var(--lavender); text-align:left; font:700 clamp(21px,2vw,26px)/1.15 var(--font-display); }
.app-preview-controls button[data-app-preview="steps"] { border-color:var(--coral); color:var(--coral); }
.app-preview-controls button[aria-pressed="true"] { background:var(--lavender); color:var(--night); }
.app-preview-controls button[data-app-preview="steps"][aria-pressed="true"] { background:var(--coral); color:var(--night); }
.app-mode-symbol { font:700 29px/1 var(--font-display); width:24px; flex-shrink:0; text-align:center; }
.app-preview-controls button:hover { box-shadow:0 0 0 3px #fff8e725; }
.app-spotlight button:focus-visible { outline:3px solid var(--yellow); outline-offset:5px; }
.app-mode-copy { margin-top:30px; min-height:272px; }
.app-mode-copy h3 { font-size:clamp(28px,2.8vw,38px); line-height:1.1; color:var(--yellow); letter-spacing:-.02em; }
.app-mode-copy [data-app-copy="challenge"] h3 { color:var(--lavender); }
.app-mode-copy p { font-size:22px; line-height:1.4; margin-top:15px; max-width:26ch; }
.app-mode-copy .app-full-feature { color:var(--blue); font-size:20px; margin-top:20px; }
.app-demo { min-width:0; }
.app-device { position:relative; margin:0; padding:10px; border:3px solid var(--lavender); border-radius:30px; background:#15132f; box-shadow:0 8px 0 #171537; overflow:hidden; }
.app-device-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:9px 15px 17px; color:#fff8e7; font-size:24px; line-height:1.2; }
.app-board-label { display:inline-flex; align-items:center; gap:7px; color:var(--aqua); font-size:18px; }
.app-screen { position:relative; aspect-ratio:8 / 5; border-radius:12px; overflow:hidden; background:#15132f; }
.app-screen img,.app-screen video { display:block; width:100%; height:100%; object-fit:contain; }
.app-player-bar { display:flex; min-height:66px; align-items:center; gap:24px; padding:12px 14px 3px; }
.app-progress { display:flex; flex:1; align-items:center; gap:17px; color:var(--yellow); font-size:20px; line-height:1; white-space:nowrap; }
.app-step-total { color:var(--lavender); }
.app-progress progress { appearance:none; -webkit-appearance:none; width:100%; min-width:20px; height:7px; border:0; border-radius:8px; background:#353157; overflow:hidden; }
.app-progress progress::-webkit-progress-bar { background:#353157; border-radius:8px; }
.app-progress progress::-webkit-progress-value { background:var(--aqua); border-radius:8px; }
.app-progress progress::-moz-progress-bar { background:var(--aqua); border-radius:8px; }
.app-playback { display:flex; align-items:center; justify-content:center; gap:9px; min-height:44px; min-width:106px; padding:7px 14px; border:0; border-radius:12px; color:var(--night); background:var(--yellow); font-size:18px; }
.app-playback [data-playback-icon] { width:17px; }
.app-player-bar>[data-app-complete] { font-size:20px; color:var(--lavender); }
.app-demo-label { margin:23px 10px 0; text-align:center; color:var(--lavender); font-size:18px; line-height:1.4; }
.app-demo-label strong { color:var(--aqua); font-weight:600; }
.app-video-error { margin-top:16px; font-size:20px; color:var(--yellow); }
.app-owner-card { position:relative; display:grid; grid-template-columns:minmax(0, .95fr) minmax(0, 1.2fr); align-items:center; gap:30px; margin:70px auto 0; padding:24px 58px 36px 28px; border-radius:34px; background:var(--aqua); color:var(--night); isolation:isolate; }
.app-owner-art { position:relative; height:340px; }
.app-owner-orbit { position:absolute; width:290px; height:290px; left:6px; top:21px; border-radius:50%; background:var(--lavender); }
.app-owner-box { position:absolute; width:360px; max-width:none; height:auto; left:-27px; top:-12px; transform:rotate(-6deg); }
.app-owner-phone { position:absolute; width:122px; height:auto; right:2px; bottom:-2px; transform:rotate(10deg); }
.app-owner-arrow { position:absolute; width:100px; height:auto; right:15px; top:70px; transform:rotate(38deg); }
.app-owner-copy { position:relative; padding-block:15px; }
.app-owner-copy h3 { color:var(--night); font-size:clamp(40px,4.6vw,62px); line-height:.98; letter-spacing:-.025em; }
.app-owner-copy h3 span { position:relative; z-index:0; white-space:nowrap; }
.app-owner-copy h3 span::after { content:""; position:absolute; z-index:-1; left:-3px; right:-9px; bottom:0; height:13px; border-radius:5px; background:var(--coral); transform:rotate(-2deg); }
.app-owner-copy p { max-width:33ch; margin-top:26px; font-size:26px; line-height:1.35; font-weight:600; color:#693569; }
.app-owner-copy p strong { font-weight:700; }
.app-owner-colors { position:absolute; display:flex; height:9px; left:40px; right:40px; bottom:0; border-radius:6px 6px 0 0; overflow:hidden; }
.app-owner-colors i { flex:1; background:var(--coral); }
.app-owner-colors i:nth-child(2) { background:var(--yellow); }
.app-owner-colors i:nth-child(3) { background:var(--blue); }
.app-owner-colors i:nth-child(4) { background:var(--night); }
.app-owner-colors i:nth-child(5) { background:var(--lavender); }
.app-spotlight .pixel-divider { background:var(--mint-ground); }
@media (max-width:1100px) {
  .app-grid { gap:28px; grid-template-columns:minmax(244px,.8fr) minmax(0,1.7fr); }
  .app-preview-controls button { padding:14px; gap:10px; font-size:23px; }
  .app-mode-copy h3 { font-size:31px; }
  .app-mode-copy p { font-size:21px; }
  .app-mode-copy .app-full-feature { font-size:19px; }
  .app-player-bar { gap:14px; }
  .app-owner-card { gap:22px; padding:24px 32px 32px 20px; }
  .app-owner-art { height:310px; }
  .app-owner-orbit { width:240px; height:240px; top:35px; }
  .app-owner-box { width:310px; left:-30px; top:0; }
  .app-owner-phone { width:106px; bottom:0; right:0; }
  .app-owner-arrow { width:84px; top:65px; right:12px; }
  .app-owner-copy p { font-size:24px; }
}
@media (max-width:850px) {
  .app-spotlight { padding:24px 0 83px; }
  .app-intro { grid-template-columns:1fr; text-align:center; gap:26px; padding-top:40px; margin-bottom:35px; }
  .app-intro h2 { font-size:96px; }
  .app-intro h2>span:first-child { font-size:34px; }
  .app-lead br { display:none; }
  .app-lead { font-size:31px; }
  .app-description { font-size:22px; }
  .app-description br { display:none; }
  .app-grid { display:flex; flex-direction:column; gap:27px; }
  .app-modes { display:contents; }
  .app-modes-label { display:none; }
  .app-preview-controls { order:0; flex-direction:row; width:100%; max-width:620px; gap:12px; }
  .app-preview-controls button { flex:1; justify-content:center; padding:16px 12px; font-size:23px; }
  .app-demo { order:1; width:100%; max-width:730px; }
  .app-mode-copy { order:2; margin:0; min-height:174px; text-align:center; max-width:620px; }
  .app-mode-copy h3 { font-size:32px; }
  .app-mode-copy h3 br { display:none; }
  .app-mode-copy p { max-width:42ch; margin-inline:auto; font-size:22px; margin-top:10px; }
  .app-mode-copy .app-full-feature { font-size:20px; margin-top:13px; }
  .app-owner-card { grid-template-columns:minmax(0, .85fr) minmax(0, 1fr); gap:24px; padding:25px 25px 32px 16px; margin-top:50px; }
  .app-owner-art { height:275px; }
  .app-owner-orbit { width:210px; height:210px; top:28px; }
  .app-owner-box { width:265px; left:-26px; top:4px; }
  .app-owner-phone { width:95px; bottom:2px; right:-7px; }
  .app-owner-arrow { width:72px; top:45px; right:2px; }
  .app-owner-copy h3 { font-size:40px; }
  .app-owner-copy p { font-size:22px; margin-top:20px; }
}
@media (max-width:650px) {
  .app-owner-card { display:flex; flex-direction:column; gap:5px; padding:15px 26px 36px; text-align:center; }
  .app-owner-art { width:280px; height:265px; max-width:100%; }
  .app-owner-orbit { width:210px; height:210px; left:0; top:28px; }
  .app-owner-box { width:265px; left:-22px; top:0; }
  .app-owner-phone { width:95px; right:-3px; bottom:4px; }
  .app-owner-arrow { width:78px; right:5px; top:20px; }
  .app-owner-copy { padding:0; }
  .app-owner-copy h3 { font-size:43px; }
  .app-owner-copy p { max-width:29ch; margin:22px auto 0; font-size:22px; }
}
@media (max-width:540px) {
  .app-spotlight>.wrap { width:calc(100% - 36px); }
  .app-intro { padding-top:32px; gap:24px; margin-bottom:29px; }
  .app-intro h2 { font-size:clamp(71px,20vw,94px); }
  .app-intro h2>span:first-child { font-size:29px; margin-bottom:6px; }
  .app-lead { font-size:29px; }
  .app-lead br { display:block; }
  .app-description { font-size:20px; margin-top:15px; }
  .app-description br { display:block; }
  .app-preview-controls { gap:8px; }
  .app-preview-controls button { min-height:64px; padding:11px 8px; font-size:21px; border-radius:14px; text-align:center; }
  .app-mode-symbol { display:none; }
  .app-device { padding:6px; border-width:2px; border-radius:20px; }
  .app-device-heading { padding:9px 10px 13px; font-size:22px; }
  .app-board-label { font-size:16px; }
  .app-screen { border-radius:9px; aspect-ratio:4 / 3; }
  /* The 4:3 mobile window keeps the centered board corner and the complete airplane visible. */
  .app-screen img,.app-screen video { object-fit:cover; }
  .app-player-bar { padding:9px 6px 2px; gap:10px; min-height:57px; }
  .app-progress { gap:9px; font-size:17px; }
  .app-playback { min-width:90px; font-size:17px; padding:7px 10px; }
  .app-demo-label { font-size:17px; margin:20px 8px 0; }
  .app-mode-copy { min-height:206px; }
  .app-mode-copy h3 { font-size:31px; }
  .app-mode-copy p { font-size:21px; }
  .app-mode-copy .app-full-feature { font-size:19px; }
  .app-owner-card { margin-top:36px; border-radius:26px; }
  .app-spotlight { padding-bottom:65px; }
}