.website-journey{border:1px solid #bac9df;border-radius:12px;overflow:hidden;background:#fff;color:#142b48;box-shadow:0 8px 24px #172f4c0c}
.journey-brand{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#0e233d;color:#fff;padding:18px 22px}.journey-brand>div{display:flex;align-items:center;gap:12px}.journey-monogram{font-size:27px;color:#a8b7ff}.journey-brand strong{font-size:14px;letter-spacing:.12em}.journey-brand small{display:block;font-size:8px;letter-spacing:.12em;margin-top:5px;color:#a5bad8}.journey-brand>span{font-size:11px;color:#b8c7dd}
.journey-workspace{display:grid;grid-template-columns:1fr 1fr}.journey-customer,.journey-studio{padding:25px;min-width:0}.journey-studio{border-left:1px solid #d6e0ed;background:#f4f7fc}.journey-kicker{font-size:10px;letter-spacing:.09em;color:#506989;font-weight:700}.website-journey h4{font-size:24px;line-height:1.2;letter-spacing:-.035em;margin:10px 0}.website-journey p{font-size:13px;line-height:1.6;margin:10px 0}.website-journey label{display:block;font-size:12px;font-weight:650;margin:15px 0 0}.website-journey input:not([type=checkbox]),.website-journey select,.website-journey textarea{display:block;box-sizing:border-box;width:100%;border:1px solid #b8c9de;background:#fff;color:#142b48;border-radius:4px;padding:10px;font:inherit;font-size:14px;line-height:1.4;margin-top:6px}.website-journey textarea{resize:vertical}.website-journey :is(input,select,textarea,button):focus-visible{outline:3px solid #4258ff;outline-offset:3px}.website-journey [aria-invalid=true]{border-color:#ad3f32!important;background:#fff9f7!important}.journey-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px}.journey-error{display:block;color:#9b3029;font-weight:500;font-size:12px;line-height:1.5}.journey-error:empty{display:none}.journey-customer>.action{margin-top:18px;background:#2e42f6;color:#fff;border:1px solid #2435d8}.journey-receipt{color:#52647f}.journey-studio-heading{position:relative;padding-right:35px}.journey-studio-heading>span:last-child{font-size:11px;color:#52647f}.journey-progress{list-style:none;padding:0;display:flex;gap:4px;margin:20px 0}.journey-progress li{flex:1;font-size:11px;border-top:3px solid #c8d5e6;padding-top:8px;color:#65758b}.journey-progress li.is-complete{border-color:#354afa;color:#2238cf;font-weight:700}.journey-record{border-block:1px solid #c6d3e6;margin-top:18px;min-height:150px;padding:18px 0}.journey-record-id{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#3651d8}.journey-record strong{font-size:20px;display:block;margin:10px 0 4px}.journey-record dl{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:12px;margin:14px 0}.journey-record dt{color:#5c708a}.journey-record dd{margin:0;overflow-wrap:anywhere}.journey-record .journey-message{font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}.journey-empty{color:#62748d;padding-block:20px}.journey-refused{border-left:3px solid #ad3f32;padding:8px 14px;color:#763f3a}.journey-handover{margin-top:14px}.journey-handover .switch{display:flex;align-items:center;gap:10px;margin:0}.journey-handover .switch input{width:17px;height:17px;accent-color:#2e42f6}.journey-handover p{color:#52647f;font-size:12px}.journey-handover .action{font-size:12px;padding:9px 12px}.journey-controls{border-top:1px solid #c6d3e6;background:#fff;padding:12px 22px;display:flex;align-items:center;gap:24px}.journey-controls p{margin:0;flex:1}.journey-controls>span{font-size:11px;color:#62748d;max-width:180px}.journey-foundation-notes{margin-top:20px;border-top:1px solid #bccce0;padding-top:14px}.journey-foundation-notes>summary{cursor:pointer;font-size:14px;font-weight:650;color:#2445a1}.journey-foundation-notes .backend-foundations{margin-top:18px}
@media(max-width:850px){.journey-workspace{grid-template-columns:1fr}.journey-studio{border-left:0;border-top:1px solid #c6d3e6}.journey-customer,.journey-studio{padding:21px}.journey-record{min-height:100px}.journey-brand>span{max-width:140px}.journey-controls{display:block}.journey-controls>span{display:block;max-width:none;margin-top:8px}}
@media(max-width:430px){.journey-brand{padding:16px;align-items:flex-start}.journey-brand>span{max-width:110px;font-size:10px}.journey-fields{grid-template-columns:1fr;gap:0}.journey-customer,.journey-studio{padding:18px}.journey-progress li{font-size:10px}.journey-controls{padding:14px 18px}}
@media(max-width:760px){.explainer input:not([type=checkbox]):not([type=radio]),.explainer select,.explainer textarea{font-size:16px;min-height:44px;max-width:100%;box-sizing:border-box}.explainer textarea{min-height:84px}.website-journey .action{min-height:44px;font-size:14px}.website-journey .switch{min-height:44px}}

/* A phone is a working lesson, with its explanation following the experiment. */
.phone-lesson-controls,.phone-lesson-title{display:none}
@media(max-width:760px){
 .phone-lesson-controls{display:grid;grid-template-columns:minmax(104px,.85fr) minmax(0,1.3fr) 44px;align-items:end;gap:6px;padding:9px 8px 10px;position:sticky;top:0;z-index:8;border-radius:5px 20px 0 0;background:#10233e;box-shadow:0 3px 0 #152d4e15}
 .phone-lesson-controls label{display:block;min-width:0;margin:0;font-size:10px;font-weight:600;letter-spacing:.025em;line-height:1.4;color:#b9cae8}
 .phone-lesson-controls select{display:block;width:100%;min-width:0;margin-top:4px;padding:8px 5px 8px 8px;min-height:44px;border:1px solid #8da5cf;border-radius:5px;background:#fff;color:#18314f;font-family:inherit;font-size:16px;font-weight:400;letter-spacing:normal;line-height:1.2}
 .phone-lesson-controls select:disabled{opacity:1;border-color:#607899;background:#1e3656;color:#d7e3f5}
 .phone-lesson-controls>button{height:44px;width:44px;margin:0;padding:0;border:1px solid #8da5cf;border-radius:5px;background:#223f6b;color:#fff;font-family:inherit;font-size:12px;font-weight:600;line-height:1.2;cursor:pointer}
 .phone-lesson-controls :is(select,button):focus-visible{outline:3px solid #b4d2ff;outline-offset:2px}
 .explainer>.topics{display:none}
 .lesson{display:flex;flex-direction:column;min-height:0}
 .lesson-experience{order:0;padding:16px 12px 12px;min-width:0}
 .phone-lesson-title{display:block;font-size:23px;font-weight:600;line-height:1.15;letter-spacing:-.035em;color:#142642;margin:0 0 12px}
 .lesson-experience>.chapter-instruction,.lesson-experience>.chapters{display:none}
 .lesson-experience>.experiment-prompt{font-size:13px;line-height:1.5;margin:0 0 13px;gap:8px}
 .lesson-experience>.experiment-prompt strong{font-size:9px;line-height:1.5;padding:3px 5px}
 .lesson-experience>.related-lesson{font-size:12px;margin:0 0 12px;padding-top:0;border-top:0}
 .lesson-reading{order:1;padding:20px 18px;border-top:1px solid #d6e0ef}
 .lesson-reading:before{content:'WHY IT MATTERS';display:block;margin-bottom:10px;font-size:10px;letter-spacing:.09em;font-weight:700;color:#2845c5}
 .lesson-reading .scene-heading :is(h3,h4){display:none}
 .lesson-reading .scene-heading p{margin:0;font-size:14px;line-height:1.65}
 .lesson-reading .topic-context{font-size:13px;line-height:1.6;margin-top:16px;padding-top:14px}
 .lesson-reading .scene-heading>.reset{min-height:44px;margin-top:10px}
 .lesson-experience>.visual-stage{padding:16px 12px;min-height:0}
 .lesson-experience .outcome{font-size:13px;line-height:1.55;padding-top:13px;margin-top:0}
 .lesson-experience #discovery-map .example-site-caption{margin-bottom:12px}
 .lesson-experience #discovery-map .example-site-caption strong{font-size:18px;line-height:1.2}
 .lesson-experience #discovery-map .example-site-caption p{display:none}
 .lesson-experience #discovery-map .example-link-control{padding:9px;margin-bottom:10px}
 .lesson-experience #discovery-map .example-link-control p{font-size:12px}
 .lesson-experience .phone-demo-pages>span{display:none}
 .lesson-navigation{padding:12px 18px}
 .lesson-navigation button{width:100%;margin-top:8px;font-size:13px;min-height:44px}
 .service-connection{padding:18px}
 .service-connection p{font-size:14px;line-height:1.6}
 .current-lesson-explanation{padding-bottom:14px;border-bottom:1px solid #cbd7ed;margin-bottom:18px}
 .current-lesson-explanation>strong{font-size:18px;line-height:1.3;display:block}
}
@media(max-width:359px){
 .phone-lesson-controls{grid-template-columns:minmax(0,1fr) 44px;padding-block:8px}
 .phone-lesson-controls label{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:6px}
 .phone-lesson-controls label:first-child{grid-column:1;grid-row:1}
 .phone-lesson-controls label:nth-child(2){grid-column:1/-1;grid-row:2}
 .phone-lesson-controls select{margin-top:0}
 .phone-lesson-controls>button{grid-column:2;grid-row:1}
}