/* A miniature website using the parent page's ink, cobalt and white. */
#discovery-map{display:block;padding:0;perspective:none;min-height:0!important}
.seo-stage:has(#discovery-map:not([hidden])){padding:24px 20px 17px;align-items:stretch;background:#eaf0fa;border:1px solid #cbd7ec;box-shadow:0 4px 0 #dce4f3}
.seo-stage:has(#discovery-map:not([hidden])):before{display:none}
.example-site-caption{display:flex;justify-content:space-between;gap:24px;align-items:start;margin:0 0 22px;color:#122441}
.example-site-label{display:block;font-size:9px;letter-spacing:.12em;color:#3353b6;font-weight:700;margin-bottom:7px}
.example-site-caption strong{display:block;font-size:23px;line-height:1.2;letter-spacing:-.035em;font-weight:650}
.example-site-caption p{font-size:12px;line-height:1.6;color:#52647f;margin:0;max-width:36ch}
.example-pages{display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr) 26px minmax(0,1fr);align-items:stretch;gap:0}
#discovery-map .example-webpage{padding:0;min-height:0;display:flex;flex-direction:column;gap:0;overflow:hidden;background:#fff;color:#142641;border:1px solid #c8d3e7;box-shadow:0 4px 8px #18355a0a,0 16px 30px -20px #18355a40;transform:none;border-radius:7px;transition:box-shadow .2s,border-color .2s}
#discovery-map .example-webpage:focus{outline:3px solid #3156ed;outline-offset:3px}
#discovery-map .example-webpage{align-items:stretch}
#discovery-map .new-page{border-color:#a7b7d0}
#discovery-map .is-visited{border-color:#3156ed;box-shadow:0 0 0 3px #3156ed28,0 16px 30px -20px #18355a40}
#discovery-map.is-connected .new-page{border-color:#3156ed;box-shadow:0 0 0 2px #3156ed25,0 16px 30px -20px #18355a40}
#discovery-map .paper-top{margin:0;padding:9px 8px;display:flex;align-items:center;gap:7px;border-bottom:1px solid #e1e7f2;background:#f4f6fa;grid-column:auto;grid-row:auto;min-width:0}
.example-browser-dots{display:flex;gap:3px;flex:none}.example-browser-dots i{height:4px;width:4px;border-radius:50%;background:#c1ccdf!important;display:block;flex:none}
#discovery-map .paper-top>span:not(.example-browser-dots){font-size:8px;color:#52647f;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.example-masthead{padding:13px 13px 0;background:#fff}
.example-brand{display:flex;align-items:center;gap:7px;color:#162b4e;line-height:1.2}
.example-brand>b{display:block;position:relative;font-size:30px;font-weight:800;letter-spacing:-.13em;line-height:1;padding-right:8px;color:#2543ec}
.example-brand>b>span{font-size:17px;position:absolute;right:0;top:-3px}
.example-brand>span{font-size:10px;font-weight:800;letter-spacing:.13em}
.example-brand small{display:block;font-size:6px;font-weight:550;letter-spacing:.08em;margin-top:3px;color:#687b96}
.example-nav{display:flex;flex-wrap:wrap;gap:5px 12px;align-items:center;padding:11px 0 8px;border-bottom:1px solid #e8edf5;font-size:10px;color:#52647f}
.example-nav button{border:0;border-radius:0;padding:0;background:none;font:inherit;color:#52647f;cursor:pointer;min-height:23px;text-decoration:underline;text-decoration-color:#aebcdf;text-underline-offset:4px}
.example-nav [aria-current]{font-weight:700;color:#2543ec}.example-nav button:hover{color:#2543ec}
.example-site-art{position:relative;height:133px;margin:0 13px;overflow:hidden;background:#102645}
.example-site-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:60% 51%}
.example-site-art:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 25%,#061a3499)}
.example-site-art>span{position:absolute;left:12px;bottom:11px;font-size:12px;line-height:1.3;font-weight:550;color:#fff;z-index:1}
.example-page-content{padding:18px 13px 14px;display:flex;flex-direction:column;flex:1}
.example-page-type{font-size:8px;letter-spacing:.09em;font-weight:750;color:#4868ac}
.example-page-content h4{font-family:inherit;font-size:clamp(19px,1.55vw,24px);line-height:1.08;letter-spacing:-.045em;font-weight:600;color:#132441;margin:10px 0}
.example-page-content p{font-size:11px;line-height:1.55;color:#596c87;margin:0 0 17px}
.example-page-link{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;font-size:11px;font-weight:650;line-height:1.4;border:1px solid #2543ec;border-radius:3px 13px 3px 3px;background:#2543ec;color:#fff;padding:10px;margin-top:auto;cursor:pointer;min-height:41px}
.example-page-link:not(:disabled):hover{background:#1932bc;color:#fff}.example-page-link>span{font-size:17px}
.example-page-link:focus-visible,.example-nav button:focus-visible{outline:3px solid #719bff;outline-offset:3px}
.example-page-link:disabled{background:#f2f5fc;border:1px dashed #91a5ca;color:#435c87;cursor:default;opacity:1}
.example-services{padding:0;margin:0 0 20px;list-style:none;color:#354969;line-height:1.5}
.example-services li{display:flex;gap:10px;border-bottom:1px solid #e2e8f3;padding:16px 0;align-items:start}
.example-services li>span{font-size:9px;line-height:1.8;font-weight:700;color:#3156ed}
.example-services strong{font-size:12px;line-height:1.4;font-weight:650;display:block;color:#182e50}
.example-services small{font-size:10px;line-height:1.5;display:block;color:#647693;margin-top:4px}
.example-enquiry{display:flex;flex-direction:column;gap:7px;margin-top:5px}
.example-enquiry label{font-size:10px;color:#344c70;font-weight:650}
.example-enquiry select,.example-enquiry textarea{display:block;width:100%;min-width:0;border:1px solid #cad5e8;border-radius:3px;background:#fff;color:#18304e;font:inherit;font-size:11px;padding:9px;line-height:1.5;box-sizing:border-box}
.example-enquiry select{min-height:39px;margin-bottom:6px}.example-enquiry textarea{min-height:76px;resize:vertical;margin-bottom:7px}
.example-enquiry textarea::placeholder{color:#7384a0}.example-enquiry :is(select,textarea):focus{outline:2px solid #3156ed;outline-offset:2px}
.example-enquiry .example-page-link{margin-top:0}.example-enquiry #example-enquiry-status{font-size:9px;line-height:1.5;margin:2px 0 0;min-height:27px;color:#617391}
.example-enquiry #example-enquiry-status[data-previewed]{color:#2543ba}
.example-page-foot{padding:10px 12px;display:flex;align-items:center;gap:6px;font-size:10px;line-height:1.4;font-weight:600;color:#344e78;background:#f5f7fc;border-top:1px solid #e1e7f2;min-height:39px}
.example-page-foot>span{color:#7186ac;font-size:9px}.example-page-foot>small{margin-left:auto;text-align:right;font-size:9px;font-weight:450;color:#697d9d}
#discovery-map.is-connected #example-contact-state{color:#2343b0;background:#eaf0ff}
.example-pages .map-path{min-height:0;align-self:center;position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:25px;color:#2543ec}
.example-pages .map-path small{font-size:9px;width:auto;max-width:26px;overflow-wrap:normal;line-height:1.4;text-align:center;color:#526a93}
.example-pages .new-path{color:#8294b1}#discovery-map.is-connected .new-path{color:#2543ec}
.example-link-control{display:flex;align-items:center;gap:20px;margin-top:24px;padding:15px 0 0;border-top:1px solid #cbd7ec;color:#18304e}
.example-link-control .switch{margin:0;padding:0;border:0;flex-shrink:0;gap:9px;font-size:12px;min-height:34px;color:#18304e;font-weight:650}
.example-link-control p{font-size:12px;line-height:1.5;margin:0;color:#526a8b}
.example-follow-status{font-size:11px;line-height:1.5;margin:7px 0 0;color:#526a8b}
@media(max-width:1050px){.example-site-caption{display:block}.example-site-caption p{max-width:none;margin-top:9px}.example-pages{grid-template-columns:1fr}.example-pages .map-path{height:40px;min-height:40px;flex-direction:row;gap:9px;justify-content:center}.example-pages .map-path>span{transform:rotate(90deg)}.example-pages .map-path small{max-width:none;font-size:10px}#discovery-map .example-webpage{max-width:430px;width:100%;margin-inline:auto}.example-page-content h4{font-size:27px}.example-page-content p{font-size:13px}.example-site-art{height:158px}.example-page-content{padding:19px}.example-masthead{padding:16px 19px 0}.example-site-art{margin-inline:19px}.example-page-link{font-size:12px}.example-services li{padding:14px 0}.example-services strong{font-size:14px}.example-services small{font-size:12px}.example-enquiry label,.example-enquiry select,.example-enquiry textarea{font-size:12px}.example-enquiry #example-enquiry-status{font-size:11px;min-height:0}.example-link-control{align-items:flex-start;flex-direction:column;gap:5px}}
@media(max-width:700px){.seo-stage:has(#discovery-map:not([hidden])){padding:20px 14px 16px}.example-site-caption strong{font-size:23px}.example-site-caption p{font-size:13px}.example-page-content h4{font-size:26px}.example-nav{font-size:12px;gap:7px 16px}.example-nav button{min-height:30px}.example-page-link{min-height:44px}.example-brand>span{font-size:12px}.example-brand small{font-size:7px}.example-enquiry select,.example-enquiry textarea{font-size:16px}.example-link-control .switch{font-size:13px}.example-follow-status{font-size:12px}.example-page-foot{font-size:11px}.example-page-foot small{font-size:10px}}
@media(prefers-reduced-motion:reduce){#discovery-map .example-webpage{transition:none}}

/* A phone shows one readable page, with the link experiment always in reach. */
.phone-demo-pages{display:none}
@media(max-width:700px){
 #discovery-map{display:flex;flex-direction:column}
 #discovery-map .example-site-caption{order:0}
 #discovery-map .example-link-control{order:1;margin:0 0 14px;padding:12px;border:1px solid #c4cfe8;border-radius:6px;background:#fff}
 #discovery-map .phone-demo-pages{order:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-bottom:12px}
 .phone-demo-pages>span{grid-column:1/-1;font-size:12px;color:#3d5379}
 .phone-demo-pages>button{min-height:44px;font:600 13px/1.3 'DM Sans',sans-serif;background:#fff;border:1px solid #b9c8e3;border-radius:5px;color:#244066;cursor:pointer}
 .phone-demo-pages>button[aria-pressed=true]{background:#2e42f6;border-color:#2e42f6;color:white}
 #discovery-map .example-pages{order:3;display:block}
 #discovery-map[data-phone-page] .map-path{display:none}
 #discovery-map[data-phone-page=demo-home] :is(#demo-services,#demo-contact),
 #discovery-map[data-phone-page=demo-services] :is(#demo-home,#demo-contact),
 #discovery-map[data-phone-page=demo-contact] :is(#demo-home,#demo-services){display:none}
 #discovery-map .example-follow-status{order:4}
 #discovery-map .example-webpage{width:100%;box-sizing:border-box}
 #discovery-map :is(input,select,textarea){font-size:16px}
}