.companion-page{max-width:1200px;padding-top:35px}
.companion-heading{display:flex;min-height:250px;justify-content:space-between;align-items:center;gap:20px;background:#c4dce9;border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink);overflow:hidden}
.companion-heading>div{padding:25px 35px;z-index:1}
.companion-heading h1{font-size:clamp(32px,4.7vw,57px);margin:14px 0 4px}
.companion-heading p{font-size:18px;margin:0}
.companion-scene{align-self:stretch;width:42%;min-width:260px;background:url('/scene-atlas.png') 100% 66.6667%/200% 400% no-repeat;image-rendering:pixelated;border-right:3px solid var(--ink)}
.companion-tabs{display:flex;gap:0;margin:35px 0 26px;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);width:max-content;max-width:100%}
.companion-tabs button{border:0;border-left:2px solid var(--ink);padding:11px 28px;background:#fff7df;color:var(--ink);font-weight:700;min-height:48px}
.companion-tabs button:last-child{border:0}
.companion-tabs button[aria-pressed=true]{background:#256c7f;color:#fff9e1}
.companion-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(270px,.85fr);gap:18px;align-items:start}
.pixel-panel{border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:#fff9e9;padding:23px;margin-bottom:22px}
.pixel-panel h2{font-size:24px;margin:0 0 12px}
.pixel-panel p{font-size:16px;line-height:1.8;color:#47606a;margin:0 0 16px}
.trip-booking{background:#c1dde4}
.trip-list{list-style:none;margin:20px 0;padding:0}
.trip-stop{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:13px;padding:0 0 19px;position:relative;align-items:start}
.trip-stop:not(:last-child):before{content:"";position:absolute;right:19px;top:38px;bottom:0;border-right:2px dashed #69a0aa}
.trip-number{border:2px solid var(--ink);background:#b8ded5;font:12px 'Press Start 2P',monospace;text-align:center;padding:10px 0;min-height:36px}
.trip-stop strong{display:block;font-size:18px;margin:0 0 3px}
.trip-stop small{display:block;color:#53717a;font-size:14px;line-height:1.5}
.trip-actions{display:flex;gap:3px}
.trip-actions button{width:34px;height:36px;border:2px solid var(--ink);background:#fff;color:var(--ink);font:18px sans-serif}
.trip-actions button:disabled{opacity:.4;cursor:default}
.trip-form{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.trip-form input{flex:1;min-width:190px;border:2px solid var(--ink);background:#fff;padding:10px 14px;min-height:47px;font-family:inherit;font-size:16px}
.trip-checks{display:grid;gap:9px}
.trip-checks .check-item{font-size:15px}
.trip-checks .done span{text-decoration:line-through;color:#748b81}
.travel-map{height:390px;position:relative;border:3px solid var(--ink);background:#c9dedb}
.travel-map iframe{border:0;width:100%;height:100%}
.map-offline{display:none;position:absolute;inset:0;place-items:center;text-align:center;padding:20px;background:#d8e9df;font-weight:700}
.map-offline.show{display:grid}
.trip-places{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px;margin-top:19px}
.trip-places article{border:2px dashed #8ca9a9;padding:17px}
.trip-places h3{font-size:21px;margin:0 0 8px}
.trip-places p{margin-bottom:15px}
.install-tip{border:2px dashed #4c8b8d;background:#e4eedf;padding:15px 19px;margin-top:22px;font-size:15px}
.companion-callout{display:flex;align-items:center;justify-content:space-between;gap:25px;margin:34px 0 0;background:#d8e8df;border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:21px 28px}
.companion-callout h2{font-size:25px;margin:8px 0 2px}
.companion-callout p{margin:0;font-size:16px}
@media(max-width:850px){.companion-grid{grid-template-columns:1fr}.companion-heading{min-height:200px}.companion-scene{min-width:180px}.trip-places{grid-template-columns:1fr}}
@media(max-width:570px){.companion-page{padding-top:24px}.companion-heading{display:block}.companion-heading>div{padding:22px}.companion-heading h1{font-size:35px}.companion-heading p{font-size:16px}.companion-scene{display:block;width:100%;height:130px;border-right:0;border-top:3px solid var(--ink)}.companion-tabs{width:100%;margin:23px 0 20px}.companion-tabs button{flex:1;padding:9px 4px;font-size:14px}.pixel-panel{padding:17px}.trip-stop{grid-template-columns:37px minmax(0,1fr) auto;gap:8px}.trip-actions{flex-direction:column}.trip-stop:not(:last-child):before{right:17px}.trip-form button{width:100%}.travel-map{height:340px}.companion-callout{display:block;padding:18px}.companion-callout button{margin-top:17px;width:100%}}

/* Readiness is the final step of the trip companion. */
.ready-panel{max-width:760px}.ready-panel h2{margin:12px 0}.ready-panel .trip-checks{margin:20px 0 26px}.ready-panel .check-item{font-size:16px}
@media(max-width:570px){.companion-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.companion-tabs button{border:0;border-bottom:2px solid var(--ink)}.companion-tabs button:nth-last-child(-n+2){border-bottom:0}}