/* Polycity's experimental homepage. Manrope is bundled under the adjacent OFL license. */
@font-face{font-family:Manrope;font-style:normal;font-weight:200 800;font-display:swap;src:url('./assets/manrope.ttf?v=d0639be45d0a') format('truetype')}
:root{color-scheme:light;--ink:#182724;--muted:#62716a;--paper:#f5f3ed;--gold:#dfbd7c;--navy:#16204a;--blue:#2456a8;--orange:#f0912f;--line:#d8dbd1}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:28px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{font-weight:500}
a{color:inherit;text-decoration:none}
button,input,summary{font:inherit}
button,label,summary,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,summary:focus-visible,input:focus-visible,label:has(input:focus-visible){outline:3px solid #45c4e8;outline-offset:5px}
::selection{background:#ddbb7d;color:#142523}
img,svg{display:block}
p{line-height:1.7}
.wrap{width:min(1320px,calc(100% - 112px));margin-inline:auto}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:10px;line-height:1.7;font-weight:650;letter-spacing:2.3px;text-transform:uppercase}
.eyebrow:before{content:"";width:6px;height:6px;border-radius:50%;background:#b9975b;flex-shrink:0}
.serif{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400}
.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.skip{position:fixed;left:20px;top:-100px;z-index:99;background:white;color:var(--ink);padding:14px 20px}
.skip:focus{top:12px}
.site-header{height:99px;background:#fbfaf6;position:relative;z-index:10}
.nav{height:100%;display:flex;align-items:center;gap:38px}
.brand{display:flex;align-items:center;gap:20px;flex-shrink:0}
.brand-logo{display:block;width:112px;height:auto;mix-blend-mode:normal}
.brand-note{font-size:9px;line-height:1.6;letter-spacing:1.1px;text-transform:uppercase;padding-left:22px;border-left:1px solid #d4d9d0;color:#63716b}
.nav-links{display:flex;gap:32px;margin-left:auto;font-size:11px;font-weight:550}
.nav-links a{padding:12px 0;position:relative}
.nav-links a:after{content:"";position:absolute;bottom:5px;left:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.nav-links a:hover:after{transform:scaleX(1)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:52px;padding:0 22px;border:1px solid transparent;border-radius:4px;background:#e5c78e;color:#172522;font-size:11px;font-weight:750;transition:background .25s,transform .25s;white-space:nowrap}
.button:hover{background:#f2dba9;transform:translateY(-2px)}
.button .arrow{font-size:21px;line-height:1;font-weight:400}
.nav .button{min-height:43px;background:#172825;color:#faf9ee;padding:0 18px;font-size:10px;gap:22px}
.nav .button:hover{background:#31483f}
.text-link{display:inline-flex;align-items:center;gap:15px;font-size:11px;font-weight:650}
.text-link .arrow{font-size:19px}
.mobile-menu{display:none}
.location-cross{width:19px;height:19px;border:1px solid #d5be8590;border-radius:50%;position:relative}
.location-cross:after{content:"";position:absolute;inset:7px;background:#d5be85;border-radius:50%}
.domain-strip{border-bottom:1px solid var(--line);background:#eeeee5}
.domains{display:flex;align-items:center;justify-content:space-between;gap:30px;padding-block:29px}
.domain-intro{font-size:9px;line-height:1.65;letter-spacing:1.4px;color:#626f65;text-transform:uppercase}
.domain{display:flex;align-items:center;gap:11px;font-size:11px;color:#42564d}
.domain .icon{width:19px;height:19px;color:#879783}
.manifesto{padding:107px 0 113px}
.manifesto-grid{display:grid;grid-template-columns:1fr 2.15fr;gap:70px}
.manifesto .eyebrow{align-self:start;margin-top:15px}
.manifesto h2{font-size:49px;line-height:1.22;letter-spacing:-2.2px;max-width:790px}
.manifesto h2 .muted{color:#7e8a76}
.manifesto p{max-width:575px;margin-top:27px;font-size:14px;color:#627166;line-height:1.85}
.question-section{padding:8px 0 113px}
.question-grid{display:grid;grid-template-columns:1fr 1.13fr;gap:88px;align-items:center}
.section-heading{font-size:57px;line-height:1.12;letter-spacing:-2.8px}
.section-heading .serif{font-size:1.09em;color:#718369}
.question-intro{max-width:365px;font-size:13px;color:#657267;line-height:1.85;margin-top:23px}
.questions{border:0;margin:37px 0 0;padding:0}
.questions legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.question-choice{position:absolute;opacity:0;width:1px;height:1px}
.question-label{display:flex;align-items:center;gap:17px;padding:20px 0;border-top:1px solid #d9dcd2;cursor:pointer;position:relative}
.question-index{font-size:10px;color:#5f6e54;letter-spacing:1px;width:20px}
.question-title{font-size:16px;letter-spacing:-.5px;flex:1}
.question-label .plus{font-size:22px;font-weight:300;color:#89947f;transition:rotate .3s}
.question-choice:focus-visible+.question-label{outline:3px solid #2456a8;outline-offset:4px}
.question-choice:checked+.question-label{color:#293d30}
.question-choice:checked+.question-label .plus{rotate:45deg}
.question-detail{display:none;padding:0 0 24px 37px}
.question-choice:checked+.question-label+.question-detail{display:block;animation:copy-lift .35s both}
.question-detail p{font-size:12px;line-height:1.85;color:#637267;max-width:355px}
.question-detail .text-link{margin-top:19px;font-size:10px;color:#355139}
.question-image-note{font-size:9px;line-height:1.6;color:#62735a;margin-top:14px;display:flex;justify-content:space-between;gap:20px}
.workflow{padding:112px 0;background:#eeeede}
.workflow-grid{display:grid;grid-template-columns:1fr 1.12fr;gap:94px}
.workflow-heading{position:sticky;top:65px;align-self:start}
.workflow .eyebrow{color:#5e6c52;margin-bottom:25px}
.workflow h2{font-size:62px;line-height:1.09;letter-spacing:-3.4px}
.workflow h2 .serif{color:#758466}
.workflow-heading>p{max-width:325px;margin-top:26px;font-size:13px;color:#5b6a51}
.workflow-heading .text-link{margin-top:30px}
.workflow-steps{border-top:1px solid #cdd3bf}
.workflow-step{display:grid;grid-template-columns:54px 1fr;gap:25px;padding:27px 0;border-bottom:1px solid #cdd3bf}
.workflow-step .step-number{font:italic 37px/1.1 Georgia,serif;color:#7b8969}
.workflow-step h3{font-size:20px;letter-spacing:-.7px;margin-bottom:9px}
.workflow-step p{font-size:12px;line-height:1.85;color:#5c6c50;max-width:370px}
.workflow-step .step-label{display:block;font-size:8px;letter-spacing:1.5px;margin-top:13px;color:#516348;text-transform:uppercase}
.outcomes{padding:110px 0 100px}
.outcomes-grid{display:grid;grid-template-columns:1fr 1.12fr;gap:94px}
.outcomes .eyebrow{margin-bottom:24px}
.outcomes h2{font-size:59px;line-height:1.1;letter-spacing:-3px}
.outcomes h2 .serif{color:#82906f}
.outcomes-intro{font-size:13px;color:#5e6e58;line-height:1.9;max-width:330px;margin-top:24px}
.outcomes .text-link{margin-top:28px;max-width:320px;line-height:1.6}
.outcome-list{border-top:1px solid var(--line)}
.outcome{border-bottom:1px solid var(--line)}
.outcome summary{display:flex;align-items:center;gap:19px;cursor:pointer;list-style:none;padding:21px 0}
.outcome summary::-webkit-details-marker{display:none}
.outcome summary .icon{width:21px;height:21px;color:#88997e}
.outcome summary h3{font-size:16px;letter-spacing:-.4px;flex:1}
.outcome summary:after{content:"+";font-size:21px;color:#88997e;font-weight:300}
.outcome[open] summary:after{content:"−"}
.outcome p{font-size:12px;line-height:1.85;color:#667362;padding:0 35px 23px 40px}
.trust{padding:16px 0 102px}
.trust-top{padding-top:60px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:50px;align-items:center}
.trust-top h2{font-size:35px;letter-spacing:-1.5px;line-height:1.2;max-width:465px}
.trust-top .eyebrow{max-width:230px;color:#64745e}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:55px;margin-top:43px}
.trust-item{padding-left:25px;border-left:1px solid #d6dbcb}
.trust-item .icon{color:#8c9c77;margin-bottom:22px;width:26px;height:26px}
.trust-item h3{font-size:16px;letter-spacing:-.5px;margin-bottom:12px}
.trust-item p{font-size:11px;line-height:1.9;color:#5f6d53;max-width:310px}
.closing{position:relative;overflow:hidden;background:#101e22;color:#eee9d8;padding:97px 0}
.closing:before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,#102a24,#27463b);opacity:.75}
.closing-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:60px}
.closing h2{font:italic 65px/1.1 Georgia,serif;letter-spacing:-2px;max-width:690px;color:#ebd29d}
.closing p{font-size:12px;color:#b6c2be;margin-top:23px}
.closing .button{flex-shrink:0}
.site-footer{background:#faf9f3}
.footer-inner{padding:30px 0;display:flex;align-items:center;gap:45px;min-height:145px}
.footer-inner .brand-logo{width:119px}
.footer-inner p{font-size:10px;color:#617155}
.footer-link{margin-left:auto;font-size:10px;display:flex;gap:20px;align-items:center}
.footer-link span{font-size:17px}
@media(min-width:1680px){}
@media(max-width:1200px){.wrap{width:calc(100% - 72px)}.brand-note{display:none}.manifesto-grid{gap:45px;grid-template-columns:1fr 2.3fr}.manifesto h2{font-size:42px}.question-grid{gap:50px}.section-heading{font-size:48px}.workflow-grid,.outcomes-grid{gap:55px}.workflow h2{font-size:53px}.outcomes h2{font-size:50px}.trust-grid{gap:35px}}
@media(max-width:900px){.wrap{width:calc(100% - 48px)}.nav{gap:24px}.nav-links{gap:20px}.domain-intro{display:none}.domains{gap:16px}.domain{font-size:10px;gap:8px}.manifesto{padding:75px 0}.manifesto-grid{grid-template-columns:1fr;gap:24px}.manifesto h2{max-width:680px;font-size:45px}.question-grid{gap:35px;grid-template-columns:1fr 1fr}.section-heading{font-size:42px}.question-title{font-size:14px}.question-intro{font-size:12px}.question-detail p{font-size:11px}.question-detail{padding-left:0}.workflow,.outcomes{padding:80px 0}.workflow-grid,.outcomes-grid{gap:45px}.workflow h2,.outcomes h2{font-size:43px}.workflow-step{gap:15px;grid-template-columns:42px 1fr}.workflow-step p{font-size:11px}.trust-top h2{font-size:30px}.trust-grid{gap:25px}.trust-item{padding-left:17px}.trust-item h3{font-size:14px}.trust-item p{font-size:10px}.closing h2{font-size:51px}.closing-inner{gap:35px}.closing .button{gap:18px;padding:0 16px}}
@media(max-width:620px){.wrap{width:calc(100% - 40px)}.site-header{height:85px}.nav{gap:17px}.brand-logo{width:96px}.nav-links{display:none}.nav>.button{margin-left:auto;min-height:37px;font-size:9px;padding:0 12px;gap:15px}.mobile-menu{display:block;position:relative}.mobile-menu summary{list-style:none;cursor:pointer;padding:8px 0 8px 6px}.mobile-menu summary::-webkit-details-marker{display:none}.mobile-menu .icon{width:21px;height:21px}.menu-links{position:absolute;right:-4px;top:43px;width:210px;display:flex;flex-direction:column;gap:0;background:#faf9f3;border:1px solid #dadfce;box-shadow:0 16px 35px #1a372922;padding:8px;z-index:20}.menu-links a{padding:14px;font-size:12px}.domains{padding:22px 0;gap:16px 20px;justify-content:center;flex-wrap:wrap;overflow:visible}.domain{font-size:9px;white-space:nowrap;gap:7px}.domain .icon{width:17px;height:17px}.manifesto{padding:62px 0 64px}.manifesto-grid{gap:24px}.manifesto .eyebrow{font-size:8px;letter-spacing:1.7px;margin:0}.manifesto h2{font-size:34px;letter-spacing:-1.4px;line-height:1.28}.manifesto p{font-size:11px;line-height:1.95;margin-top:22px}.question-section{padding-bottom:67px}.question-grid{grid-template-columns:1fr;gap:28px}.section-heading{font-size:44px;letter-spacing:-2.3px}.question-intro{font-size:11px;max-width:310px;margin-top:22px}.questions{margin-top:29px}.question-label{padding:19px 0;gap:13px}.question-title{font-size:14px}.question-detail{padding-left:33px}.question-detail p{font-size:11px}.question-detail .text-link{font-size:9px}.question-image-note{font-size:8px;gap:13px}.workflow,.outcomes{padding:65px 0}.workflow-grid,.outcomes-grid{grid-template-columns:1fr;gap:34px}.workflow-heading{position:static}.workflow .eyebrow,.outcomes .eyebrow{font-size:8px;letter-spacing:1.5px;margin-bottom:23px}.workflow h2,.outcomes h2{font-size:46px;letter-spacing:-2.4px}.workflow-heading>p{font-size:11px;max-width:290px;margin-top:22px}.workflow-heading .text-link{font-size:10px;margin-top:23px}.workflow-step{grid-template-columns:42px 1fr;gap:22px;padding:24px 0}.workflow-step .step-number{font-size:34px}.workflow-step h3{font-size:19px}.workflow-step p{font-size:11px}.workflow-step .step-label{font-size:7px}.outcomes-intro{font-size:11px;margin-top:22px}.outcomes .text-link{font-size:10px}.outcome summary{padding:21px 0}.outcome summary h3{font-size:15px}.outcome p{font-size:11px}.trust{padding:0 0 65px}.trust-top{display:block;padding-top:42px}.trust-top .eyebrow{font-size:8px;letter-spacing:1.5px;max-width:none}.trust-top h2{font-size:32px;letter-spacing:-1.3px;margin-top:23px}.trust-grid{grid-template-columns:1fr;gap:31px;margin-top:35px}.trust-item{padding-left:23px;position:relative}.trust-item .icon{margin-bottom:16px;width:24px;height:24px}.trust-item h3{font-size:16px}.trust-item p{font-size:11px;max-width:300px}.closing{padding:65px 0}.closing-inner{display:block}.closing h2{font-size:48px;letter-spacing:-1.8px;max-width:330px}.closing p{font-size:11px;max-width:280px;line-height:1.9}.closing .button{margin-top:28px;font-size:10px;min-height:46px;padding:0 18px}.footer-inner{flex-wrap:wrap;gap:20px;padding:28px 0;min-height:0}.footer-inner .brand-logo{width:102px}.footer-inner p{font-size:8px;max-width:120px;margin-left:auto;text-align:right}.footer-link{border-top:1px solid #dadfce;padding-top:21px;width:100%;justify-content:space-between;font-size:9px;margin-top:3px}}
@media(max-width:360px){.wrap{width:calc(100% - 32px)}.nav{gap:12px}.brand-logo{width:85px}.nav>.button{padding:0 10px;gap:10px;font-size:8px}.manifesto h2{font-size:31px}.section-heading{font-size:41px}.workflow h2,.outcomes h2{font-size:42px}.closing h2{font-size:42px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.bldg{transform:translateZ(var(--z,5px))}.cupola{transform:translateZ(var(--z))}}


/* The paper palette, the buttons and the sections that follow. */
:root{--paper:#f3f1e7;--ink:#273c35;--muted:#596d5e;--line:#d7d9cb;--accent:#ac5038}
.serif{font:inherit;letter-spacing:inherit}
.site-header{background:var(--paper);border-bottom:1px solid #d7d9cb}
.brand-logo{width:119px}
.brand-note{color:#526454;font-size:9px}
.button{background:#2e4e40;color:#fffdf4;border-radius:2px}
.button:hover{background:#436451}
.nav .button{border:1px solid #7c8b73;background:transparent;color:var(--ink)}
.nav .button:hover{background:#e5e8d8}
button:focus-visible{outline:3px solid #ac5038;outline-offset:5px}
button{color:inherit}
.studio-scroll{display:grid;place-items:center;width:35px;height:35px;border:1px solid #b7c1a9;border-radius:50%;font-size:18px;margin-left:7px}
.domain-strip{background:#e7e9da}
.domain-intro,.question-intro,.question-detail p,.trust-top .eyebrow{color:#50614a}
.manifesto h2{font-weight:500;line-height:1.24}
.section-heading .serif{font-size:1em;color:#738366}
.workflow-step .step-number{font:400 30px/1.1 Manrope,Arial,sans-serif;letter-spacing:-1px}
.network-art{position:relative;aspect-ratio:1/1.08;background:#e3e6d5;overflow:hidden}
.network-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:25px 26px;font-size:8px;letter-spacing:1.3px;color:#435c49}
.network-heading>span:last-child{font-size:24px;line-height:1}
.planning-map{width:100%;height:auto;position:absolute;top:50%;transform:translateY(-47%)}
.network-caption{position:absolute;bottom:24px;left:26px;right:26px;display:flex;justify-content:space-between;gap:20px;border-top:1px solid #aab69c;padding-top:18px;font-size:10px;line-height:1.8;color:#3c5942}
.network-caption .map-caption-index{font-size:19px}
.map-street-choice,.map-transit-choice,.map-growth-choice{opacity:0;transition:opacity .4s}
.map-caption-streets,.map-caption-transit,.map-caption-growth{display:none}
.question-section:has(#question-streets:checked) .map-street-choice,.question-section:has(#question-transit:checked) .map-transit-choice,.question-section:has(#question-growth:checked) .map-growth-choice{opacity:1}
.question-section:has(#question-streets:checked) .map-caption-streets,.question-section:has(#question-transit:checked) .map-caption-transit,.question-section:has(#question-growth:checked) .map-caption-growth{display:block}
.closing{background:#334f42}
.closing:before{background:none}
.closing h2{font:500 76px/1.03 Manrope,Arial,sans-serif;letter-spacing:-4.6px;color:#e3e7cd}
.closing .button{background:#e2e6cc;color:#2a4837}
.site-footer{background:var(--paper)}
@media(max-width:900px){
 .network-caption{left:20px;right:20px;font-size:9px;bottom:19px}
 .network-heading{padding:20px;font-size:7px;letter-spacing:.7px}
 .closing h2{font-size:59px;letter-spacing:-3px}
}
@media(max-width:620px){
 .site-header{height:87px}
 .brand-logo{width:102px}
 .studio-scroll{width:30px;height:30px;flex-shrink:0;margin-left:0;font-size:15px}
 .network-art{aspect-ratio:1/1.02}
 .network-heading{font-size:7px;padding:20px}
 .network-caption{font-size:9px;left:20px;right:20px}
 .closing h2{font-size:51px;letter-spacing:-3px}
 .section-heading .serif{font-size:1em}
}
/* Motion continues through a street study, the planning cycle, and a closing neighborhood. */
.network-heading{position:relative;z-index:2;pointer-events:none}
.street-model{position:absolute;inset:38px 0 48px}
[data-story-stage] canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.story-loading{position:absolute;left:10%;right:10%;top:45%;font-size:11px;text-align:center}
[data-story-stage][data-render-state=ready] .story-loading{visibility:hidden}
[data-story-stage][data-render-state=error] .story-loading,[data-story-stage][data-render-state=recovering] .story-loading{background:#eee8d5;color:#5e422e;padding:18px}
.network-caption{z-index:2;pointer-events:none}
.motion-control{display:inline-flex;align-items:center;gap:7px;min-height:30px;cursor:pointer;font-size:9px;line-height:1.5;white-space:nowrap}
.motion-control input{accent-color:#3e6049;width:12px;height:12px;margin:0;cursor:pointer}
.motion-control:has(input:checked){font-weight:700}
.question-image-note{align-items:center;margin-top:7px}
.workflow-sketch{margin-top:30px;max-width:440px;background:#e3e6cf;border:1px solid #c7d0b8;overflow:hidden}
.process-heading,.process-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 18px;font-size:8px;letter-spacing:1.1px;color:#4a6248}
.process-heading>span:last-child{font-size:21px;letter-spacing:0}
.process-footer{padding-top:0;padding-bottom:9px;font-size:7px;letter-spacing:.7px}
.process-footer .motion-control{font-size:8px;letter-spacing:0}
.process-drawing{width:100%;height:auto;margin-top:-5px}
.process-travelers,.process-measure,.process-comparison,.process-loop{opacity:0;transition:opacity .6s}
.workflow-sketch[data-step="1"] .process-travelers,.workflow-sketch[data-step="2"] .process-measure,.workflow-sketch[data-step="3"] .process-comparison,.workflow-sketch[data-step="4"] .process-loop{opacity:1}
.process-measure{transform-origin:220px 121px;animation:measure-reach 3.2s ease-in-out infinite}
.process-comparison path:last-child{animation:compare-shift 3.4s ease-in-out infinite}
.process-loop{animation:iteration-flow 6s linear infinite}
.workflow-step{transition:border-color .6s}
.workflow-step.is-current{border-bottom-color:#ac6949}
.workflow-step .step-number{transition:color .6s}
.workflow-step.is-current .step-number{color:#a85337}
.closing{padding:72px 0 38px}
.closing-inner{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px}
.closing-copy{position:relative;z-index:2}
.closing-copy .eyebrow{font-size:8px;letter-spacing:1.8px;color:#d2dcc2;margin-bottom:24px}
.closing h2{font-size:70px;letter-spacing:-4px}
.closing-copy .button{margin-top:27px}
.closing-scene{min-width:0}
.closing-city{position:relative;height:440px}
.closing-caption{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #8ca18b;padding-top:8px;font-size:7px;letter-spacing:1.2px;color:#d1ddc2}
.closing-caption .motion-control{font-size:8px;letter-spacing:0}
.closing-caption .motion-control input{accent-color:#d3dcb8}
.motion-paused .workflow-sketch *,.workflow-sketch:not([data-visible="true"]) *{animation-play-state:paused!important}
@keyframes measure-reach{0%,100%{transform:scale(.78)}50%{transform:scale(1.08)}}
@keyframes compare-shift{0%,100%{transform:translate(0,0)}50%{transform:translate(15px,-8px)}}
@keyframes iteration-flow{to{stroke-dashoffset:-80}}
@media(max-width:1100px){
 .closing-inner{grid-template-columns:1fr 1fr;gap:20px}
 .closing h2{font-size:56px;letter-spacing:-3px}
 .closing-city{height:380px}
 .closing-caption{font-size:6px;letter-spacing:.7px}
 .workflow-sketch{margin-top:25px}
 .process-heading{font-size:7px;padding:14px}
 .process-footer{padding-inline:14px}
 .process-footer>span{max-width:145px;line-height:1.6}
}
@media(max-width:760px){
 .closing-inner{grid-template-columns:1fr}
 .closing-city{height:390px}
 .closing-scene{margin-top:5px}
 .closing-copy{max-width:450px}
 .closing h2{font-size:58px}
 .closing-caption{font-size:7px}
 .workflow-grid{grid-template-columns:1fr;gap:35px}
 .workflow-heading{position:static}
 .workflow-sketch{max-width:none}
 .process-drawing{max-height:250px}
}
@media(max-width:620px){
 .street-model{inset:37px 0 47px}
 .network-heading{font-size:6.5px;letter-spacing:.65px}
 .network-caption{font-size:8px}
 .motion-control{font-size:8px}
 .closing{padding:56px 0 30px}
 .closing h2{font-size:52px}
 .closing-city{height:325px}
 .closing-copy .eyebrow{font-size:7px}
 .process-heading{font-size:7px;padding:14px 16px}
 .process-footer{padding-inline:16px}
 .process-footer>span{max-width:none}
}
@media(prefers-reduced-motion:reduce){
 .workflow-sketch *{animation:none!important;transition:none!important}
}

/* ---- The homepage's story, told the way the Europe meeting deck tells it ----
   The questions, AI first at dusk, the side effects. The
   words stand on the left over a wash of paper, or
   of navy at dusk; a film or the city's own story stands on the right. Every
   screen keeps a soft fade under the header, so the menu never sits on a
   roof. The opening screen's rules name the homepage alone, the one page
   without how-page, since every other page opens on its own heading over the
   same city and keeps its own look. */
.home-page:not(.how-page) .screen.hero:before{background:linear-gradient(180deg,rgba(246,247,251,.92) 0,rgba(246,247,251,0) 130px),linear-gradient(0deg,rgba(246,247,251,.97) 0,rgba(246,247,251,.85) 30%,rgba(246,247,251,0) 62%)}
/* The opening screen is the Europe meeting deck's cover over the homepage's
   own city: the mark and name large under the header, Theoremus under a thin
   rule, and the motto at the foot, its second line in the deck's colours. On
   a wide screen the deck's own paper fades run in from the left edge and up
   from the foot, so the words stand clear and the city keeps the right. The
   header's small name waits while the cover shows, as the deck's corner logo
   waits for its second slide; the scene names the screen on its canvas. */
@media(min-width:761px){.home-page.one-city:not(.how-page) .screen.hero:before{background:linear-gradient(90deg,rgba(246,247,251,.95) 0,rgba(246,247,251,.86) 28%,rgba(246,247,251,0) 52%),linear-gradient(0deg,rgba(246,247,251,.95) 0,rgba(246,247,251,.8) 22%,rgba(246,247,251,0) 44%)}}
.home-page .site-header .brand-lockup{transition:opacity .5s ease}
.home-page:not(.how-page):not(.access-page):has(.model-stage canvas:not([data-screen]),.model-stage canvas[data-screen=hero]) .site-header:not(:has(.mobile-menu[open])) .brand-lockup{opacity:0;pointer-events:none}
.home-page.one-city:not(.how-page) .screen.hero .screen-words{justify-content:space-between;padding-top:clamp(120px,15svh,170px)}
.home-page .cover-brand{position:relative;display:grid;grid-template-columns:auto auto;align-items:center;justify-content:start;width:max-content;white-space:nowrap;color:#000b2d}
.home-page .cover-mark{display:block;width:clamp(72px,8.4vw,168px);height:auto;margin-right:clamp(20px,1.9vw,36px)}
.home-page .cover-word{font:700 clamp(40px,4.6vw,92px)/1 Manrope,Arial,sans-serif;letter-spacing:.16em}
.home-page .cover-word span{background:linear-gradient(90deg,#2456a8,#7b3fa0,#c23d7c);-webkit-background-clip:text;background-clip:text;color:transparent}
.home-page .cover-maker{grid-column:1/-1;display:flex;align-items:center;gap:clamp(10px,.9vw,16px);margin:clamp(18px,1.8vw,34px) 0 0;padding-top:clamp(14px,1.4vw,26px);border-top:2px solid rgba(0,11,45,.12);font-size:clamp(13px,1.15vw,22px);font-weight:600;letter-spacing:-.01em;color:#62708a}
.home-page .cover-maker a{display:block;border-radius:4px}
.home-page .cover-maker img{display:block;width:auto;height:clamp(26px,2.4vw,46px)}
.home-page:not(.how-page) .screen.hero h1{font-size:clamp(48px,5.6vw,112px);line-height:1.04;color:#000b2d}
.home-page .cover-tint{display:inline-block;background:linear-gradient(90deg,#0ad6ed,#57039b 45%,#ae157e 75%,#fd4b08);-webkit-background-clip:text;background-clip:text;color:transparent}
.home-page .screen.questions:before{background:linear-gradient(180deg,rgba(246,247,251,.92) 0,rgba(246,247,251,0) 130px),linear-gradient(90deg,rgba(246,247,251,.97) 0,rgba(246,247,251,.93) 30%,rgba(246,247,251,0) 56%)}
@media(min-width:761px){.home-page.one-city .screen.optimise:before,.home-page.one-city .screen.outcomes:before{background:linear-gradient(180deg,rgba(246,247,251,.92) 0,rgba(246,247,251,0) 130px),linear-gradient(90deg,rgba(246,247,251,.97) 0,rgba(246,247,251,.93) 38%,rgba(246,247,251,0) 54%)}}
.home-page .screen.outcomes h2,.home-page .screen.optimise h2{font-size:clamp(34px,3.2vw,52px)}
.home-page .screen.ai{color:#fff}
/* The navy backing slides in and out with its screen; the screen's first and
   last stretch fade, so no straight line crosses the city on the way. The fade
   sits on the screen, not its backing: the backing stays pinned past the
   screen's end and is cut off there. */
.home-page .screen.ai{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 140px,#000 calc(100% - 140px),transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 140px,#000 calc(100% - 140px),transparent 100%)}
.home-page .screen.ai:before{background:linear-gradient(180deg,rgba(0,11,45,.9) 0,rgba(0,11,45,0) 130px),linear-gradient(90deg,rgba(0,11,45,.95) 0,rgba(0,11,45,.88) 32%,rgba(0,11,45,0) 58%)}
.home-page .screen.questions .screen-words,.home-page .screen.ai .screen-words{justify-content:center}
.home-page .screen.ai h2{font-size:clamp(38px,3.7vw,64px);max-width:600px}
.home-page .screen.questions h2{max-width:640px}
.home-page .screen.ai h2{color:#fff;text-shadow:0 0 28px rgba(0,11,45,.85)}
.home-page .screen.ai .eyebrow{color:#dbe3f7}
.home-page .screen.ai .copy{margin-top:20px;max-width:520px;font-size:16px;line-height:1.6;color:#1d2747}
.home-page .screen.ai .copy{color:#d5ddf2}

/* What a simulation is: the words on the left over a wash of paper, or navy
   while the city stands in numbers, and a row for each part of the story,
   the one being read in ink and bold. The wash reaches past the rows' right
   edge, so their values never stand on the city. */
.home-page .screen.simulation:before{background:linear-gradient(180deg,rgba(246,247,251,.92) 0,rgba(246,247,251,0) 130px),linear-gradient(90deg,rgba(246,247,251,.97) 0,rgba(246,247,251,.93) max(30%,640px),rgba(246,247,251,0) max(56%,780px))}
.home-page .screen.simulation[data-night]:before{background:linear-gradient(180deg,rgba(0,11,45,.9) 0,rgba(0,11,45,0) 130px),linear-gradient(90deg,rgba(0,11,45,.95) 0,rgba(0,11,45,.88) max(30%,640px),rgba(0,11,45,0) max(56%,780px))}
.home-page .screen.simulation .screen-words{justify-content:center}
.home-page .screen.simulation h2{font-size:clamp(38px,3.7vw,64px);max-width:600px;transition:color .4s}
.home-page .screen.simulation .eyebrow{transition:color .4s}
.home-page .screen.simulation .copy{margin-top:20px;max-width:520px;font-size:16px;line-height:1.6;color:#1d2747;transition:color .4s}
.home-page .sim-rows{list-style:none;margin:26px 0 0;padding:0;max-width:560px}
.home-page .sim-rows li{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-top:1px solid #b9c4da;font-size:16px;line-height:1.4;color:#4a5370;transition:color .3s}
.home-page .sim-rows li b{font-weight:600;white-space:nowrap}
.home-page .sim-rows li span{text-align:right}
.home-page .sim-rows li[data-current]{color:#000b2d;border-top:2px solid #000b2d}
.home-page .sim-rows li[data-current] b{font-weight:800}
.home-page .screen.simulation[data-night] h2,.home-page .screen.simulation[data-night] li[data-current]{color:#fff}
.home-page .screen.simulation[data-night] .eyebrow{color:#dbe3f7}
.home-page .screen.simulation[data-night] .copy{color:#d5ddf2}
.home-page .screen.simulation[data-night] li{color:#9fb0d6;border-color:#8a97c4}
.home-page .screen.simulation[data-night] li[data-current]{border-color:#fff}
/* The resident the story follows, beside the city, and the hour their day
   has reached, at the tip of its thread. */
.home-page .resident-card{position:absolute;right:48px;bottom:56px;width:270px;padding:14px 16px 16px;background:#fff;border:1px solid #d6dbe7;box-shadow:0 14px 34px rgba(0,11,45,.14);color:#000b2d;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.home-page .resident-card[data-shown]{opacity:1;transform:none}
.home-page .resident-card p{margin:0 0 10px;font-size:11px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:#52607d}
.home-page .resident-card dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:13px}
.home-page .resident-card dt{color:#52607d}
.home-page .resident-card dd{margin:0;font-weight:700;white-space:nowrap}
.home-page .resident-chain{display:grid;grid-template-columns:repeat(4,1fr);margin-top:12px;border:1px solid #d6dbe7;font-size:12px;font-weight:750;text-align:center}
.home-page .resident-chain span{padding:6px 2px;border-right:1px solid #d6dbe7;white-space:nowrap}
.home-page .resident-chain span:last-child{border-right:0}
.home-page .resident-chain .work{background:#ffe9df;color:#c43a06}
.home-page .resident-chain .shop{background:#efe2fa;color:#57039b}
.home-page .hour-tag{position:absolute;left:0;top:0;padding:4px 8px;background:#000b2d;color:#fff;font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;transform:translate(var(--x,0),var(--y,0)) translate(-50%,-100%);opacity:0;transition:opacity .3s}
.home-page .hour-tag[data-shown]{opacity:1}

/* The places of the resident's day: those they have been to stay filled,
   and where they are now is ink. Over the night the card turns navy. */
.home-page .resident-chain span{transition:background .3s,color .3s,opacity .3s}
.home-page .resident-card:has([data-current]) .resident-chain span:not([data-been],[data-current]){opacity:.45}
.home-page .resident-chain span[data-current]{background:#000b2d;color:#fff}
.home-page .resident-card{transition:opacity .4s,transform .4s,background .4s,color .4s,border-color .4s}
.home-page .resident-card[data-night]{background:#0e1a46;border-color:#3a4a80;color:#fff;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.home-page .resident-card[data-night] p,.home-page .resident-card[data-night] dt{color:#a9b6dc}
.home-page .resident-card[data-night] .resident-chain,.home-page .resident-card[data-night] .resident-chain span{border-color:#3a4a80}
.home-page .resident-card[data-night] .resident-chain span[data-current]{background:#fff;color:#000b2d}
.home-page .hour-tag{transition:opacity .3s,background .3s,color .3s}
.home-page:has(.screen.simulation[data-night]) .hour-tag{background:#fff;color:#000b2d}
/* Round after round: the resident's tries, the round being run, and the
   whole city's average trip under it. */
.home-page .rounds-card,.home-page .everyone-card{position:absolute;right:48px;width:300px;padding:14px 16px 16px;box-shadow:0 14px 34px rgba(0,11,45,.14);opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s;pointer-events:none}
.home-page .rounds-card[data-shown],.home-page .everyone-card[data-shown]{opacity:1;transform:none}
.home-page .rounds-card{top:120px;background:#fff;border:1px solid #d6dbe7;color:#000b2d}
.home-page .rounds-card p,.home-page .everyone-card p{display:flex;justify-content:space-between;gap:12px;margin:0 0 10px;font-size:11px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:#52607d;white-space:nowrap}
.home-page .rounds-count b{color:#000b2d;font-variant-numeric:tabular-nums}
.home-page .rounds-card dl{margin:0}
.home-page .rounds-card dl>div{display:flex;justify-content:space-between;gap:12px;padding:6px 0 6px 10px;border-top:1px solid #e4eaf4;font-size:13px;white-space:nowrap;opacity:.35;transition:opacity .3s,box-shadow .3s}
.home-page .rounds-card dl>div[data-been]{opacity:.6}
.home-page .rounds-card dl>div[data-current]{opacity:1;box-shadow:inset 3px 0 0 var(--way,#fd4b08)}
.home-page .rounds-card dt{color:#52607d}
.home-page .rounds-card dd{margin:0;font-weight:750}
.home-page .rounds-card [data-try=car]{--way:#fd4b08}
.home-page .rounds-card [data-try=route]{--way:#febe11}
.home-page .rounds-card [data-try=bike]{--way:#049dd6}
.home-page .rounds-card [data-try=bike][data-current] dd{color:#049dd6}
.home-page .everyone-card{top:282px;background:#000b2d;color:#fff}
.home-page .everyone-card p{color:#9fb0d6}
.home-page .everyone-card div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:12px;color:#9fb0d6;white-space:nowrap}
.home-page .everyone-card b{font-size:30px;font-weight:800;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
/* Baseline and scenarios, and AI first: the copies of the city are drawn on
   the city's own canvas (one-city.js); these are the marks beside them,
   each placed from the copy's box (home-scenarios.js, home-ai.js). */
.home-page .copies{position:absolute;inset:0;pointer-events:none}
.home-page .copies>*{position:absolute;left:0;top:0;opacity:0;transition:opacity .35s}
.home-page .copies>[data-shown]{opacity:1}
.home-page .copies .branches{width:100%;height:100%;overflow:visible}
.home-page .branches path{fill:none;stroke:#8a97c4;stroke-width:2;stroke-dasharray:6 6}
.home-page .copy-tag{padding:4px 8px;background:#000b2d;color:#fff;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transform:translate(var(--x,0),var(--y,0)) translate(-50%,0)}
.home-page .scenario-card{width:230px;padding:10px 12px;background:#fff;border:1px solid #d6dbe7;box-shadow:0 10px 24px rgba(0,11,45,.14);color:#000b2d;transform:translate(var(--x,0),var(--y,0)) translateY(-50%)}
.home-page .scenario-card p{margin:0 0 6px;font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-page .scenario-card div{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:#52607d;white-space:nowrap}
.home-page .scenario-card em{font-style:normal;font-weight:800;color:#13b37a}
/* AI first's tags are the deck's: a dot on the thing named and a navy label
   beside it; the tested plan's label is white, as the deck marks a result. */
.home-page .ai-tag.tested-tag{--dot:#000b2d}
.home-page .ai-tag.tested-tag span{background:#fff;color:#000b2d}
@media(max-width:760px){
 .home-page .rounds-card{left:16px;right:16px;top:72px;width:auto;padding:10px 14px 12px}
 .home-page .rounds-card dl>div{padding:4px 0 4px 10px;font-size:12px}
 .home-page .everyone-card{left:16px;right:16px;top:212px;width:auto;padding:10px 14px}
 .home-page .everyone-card p{margin-bottom:4px}
 .home-page .everyone-card b{font-size:24px}
 .home-page .scenario-card{width:auto;max-width:calc(100vw - 32px);padding:7px 10px}
 .home-page .scenario-card p{font-size:12px;margin-bottom:3px}
}
/* The day strip under the rows: the hour large, a bar for each hour lit once
   it has passed, and the mark at the hour. */
.home-page .sim-day{max-width:560px;margin-top:22px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s;color:#000b2d}
.home-page .sim-day[data-shown]{opacity:1;transform:none}
.home-page .sim-day>b{display:block;font-size:44px;line-height:1;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.home-page .sim-bars{position:relative;display:flex;align-items:flex-end;gap:3px;height:64px;margin-top:12px}
.home-page .sim-bars i{flex:1;height:var(--h);background:currentColor;opacity:.18;transition:opacity .25s,background .25s}
.home-page .sim-bars i[data-lit]{background:#fd4b08;opacity:1}
.home-page .sim-mark{position:absolute;left:var(--at,0%);top:-6px;bottom:0;width:2px;margin-left:-1px;background:currentColor}
.home-page .sim-ticks{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.06em;opacity:.7}
.home-page .screen.simulation[data-night] .sim-day{color:#fff}
.home-page .screen.simulation[data-night] .sim-bars i[data-lit]{box-shadow:0 0 10px rgba(253,75,8,.6)}

/* The three kinds: the heading at the top, the cards at the foot and the
   city cut into three slices between them. */
.home-page .screen.kinds:before{background:linear-gradient(180deg,rgba(246,247,251,.95) 0,rgba(246,247,251,.85) 200px,rgba(246,247,251,0) 280px),linear-gradient(0deg,rgba(246,247,251,.97) 0,rgba(246,247,251,.9) 250px,rgba(246,247,251,0) 310px)}
.home-page .screen.kinds .screen-words{justify-content:space-between;padding-bottom:32px}
.home-page .screen.kinds h2{font-size:clamp(34px,3.2vw,52px);max-width:640px}
.home-page [data-kind=quick],.home-page [data-kind-tab=quick]{--kind:#0ad6ed}
.home-page [data-kind=day],.home-page [data-kind-tab=day]{--kind:#a35ef0}
.home-page [data-kind=junction],.home-page [data-kind-tab=junction]{--kind:#fd4b08}
.home-page .kind-bar{display:none}
/* The cards, in the order Polycity runs them, joined by one dashed line
   through a dot of each kind's colour on their tops. The card being read
   is white with its colour along the top; the others fade. */
.home-page .kind-strip{position:relative;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #b9c4da;background:rgba(246,247,251,.94)}
.home-page .kind-strip:before{content:"";position:absolute;left:16.67%;right:16.67%;top:-1px;height:2px;background:repeating-linear-gradient(90deg,#000b2d 0 6px,transparent 6px 10px)}
/* A card keeps low, so the city above it stays whole on a short screen: the
   name and question on the left with the drawing beside them, the facts
   across, and both bars on one row. */
.home-page .kind-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42%);grid-template-areas:"name draw" "ask draw" "facts facts" "meters meters";column-gap:14px;align-content:start;padding:14px 18px 12px;border-right:1px solid #b9c4da;color:#000b2d;opacity:.55;transition:opacity .3s,background .3s,box-shadow .3s}
.home-page .kind-card:last-child{border-right:0}
.home-page .kind-card[data-current]{opacity:1;background:#fff;box-shadow:inset 0 4px 0 var(--kind)}
.home-page .kind-strip:not(:has([data-current])) .kind-card{opacity:1}
.home-page .kind-dot{position:absolute;top:-7px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--kind);border:2px solid #f6f7fb}
.home-page .kind-card h3{grid-area:name;display:flex;align-items:center;gap:8px;margin:0;font-size:16px;font-weight:800;color:inherit;white-space:nowrap}
.home-page .kind-card h3 i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--kind)}
.home-page .kind-ask{grid-area:ask;margin:3px 0 10px;font-size:14px;font-weight:650;line-height:1.3}
.home-page .kind-draw{grid-area:draw;align-self:center;display:block;width:100%;height:40px;margin-bottom:6px}
.home-page .kind-facts{grid-area:facts;display:grid;grid-template-columns:repeat(3,1fr);margin:0;border:1px solid #d6dbe7;font-size:12px;line-height:1.35}
.home-page .kind-facts div{padding:6px 8px;border-right:1px solid #d6dbe7}
.home-page .kind-facts div:last-child{border-right:0}
.home-page .kind-facts dt{font-size:9px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:#7b84a0;line-height:1.6}
.home-page .kind-facts dd{margin:0;font-weight:650}
.home-page .kind-meters{grid-area:meters;display:grid;grid-template-columns:auto 1fr auto 1fr;gap:0 8px;align-items:center;margin:9px 0 0}
.home-page .kind-meters dd+dt{margin-left:8px}
.home-page .kind-meters dt{font-size:9px;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:#7b84a0}
.home-page .kind-meters dd{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin:0}
.home-page .kind-meters i{height:5px;background:#d6dbe7}
.home-page .kind-meters i[data-on]{background:var(--kind)}
/* The lines where the slices meet and a name over each; navy stands behind
   the quick estimate's slice, whose city is numbers. */
.home-page .slice-night{position:absolute;left:var(--x0,0%);top:250px;bottom:var(--floor,240px);z-index:0;width:max(0px,calc(var(--cut1,0%) - var(--x0,0%)));background:#000b2d;opacity:0;transition:opacity .3s;pointer-events:none}
.home-page .slice-night[data-shown]{opacity:1}
.home-page .model-stage{z-index:1}
.home-page .slices{position:absolute;inset:0;opacity:0;transition:opacity .3s}
.home-page .slices[data-shown]{opacity:1}
.home-page .slice-line{position:absolute;top:250px;bottom:var(--floor,240px);width:2px;margin-left:-1px;background:#000b2d;opacity:0}
.home-page .slice-line[data-shown]{opacity:1}
.home-page .slice-line[data-slice-line="1"]{left:var(--cut1,0%)}
.home-page .slice-line[data-slice-line="2"]{left:var(--cut2,100%)}
.home-page .slice-name{position:absolute;top:262px;padding:5px 10px;background:rgba(246,247,251,.9);color:#7b84a0;font-size:12px;font-weight:750;letter-spacing:.14em;white-space:nowrap;transform:translateX(-50%);opacity:0;transition:opacity .3s,color .3s}
/* In a narrower window the slices are narrower, so the names are smaller and
   all three still fit over their slices. */
@media(max-width:1100px){.home-page .slice-name{padding:4px 7px;font-size:10px;letter-spacing:.1em}}
.home-page .slice-name[data-shown]{opacity:1}
.home-page .slice-name[data-current]{color:#000b2d;background:#fff;box-shadow:inset 0 -2px 0 #000b2d}
.home-page .slice-name[data-slice-name=quick]{left:calc((var(--x0,0%) + var(--cut1,0%))/2)}
.home-page .slice-name[data-slice-name=day]{left:calc((var(--cut1,0%) + var(--cut2,100%))/2)}
.home-page .slice-name[data-slice-name=junction]{left:calc((var(--cut2,100%) + var(--x1,100%))/2)}

/* The questions, one a row after a dot of its colour; the one being read is
   ink and bold. */
.home-page .asks{list-style:none;margin:30px 0 0;padding:0;max-width:600px}
.home-page .asks li{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid #b9c4da;font-size:19px;line-height:1.4;color:#4a5370;transition:color .3s}
.home-page .asks li:before{content:'';flex:none;width:10px;height:10px;border-radius:50%;background:var(--c)}
.home-page .asks li[data-current]{color:#000b2d;font-weight:750;border-top:2px solid #000b2d}
/* "For example" over the list, in the label's own type. */
.home-page .screen-words .asks-for{margin:30px 0 0}
.home-page .screen-words .asks-for+.asks{margin-top:10px}
.home-page .asks li:last-child{border-bottom:1px solid #b9c4da}
/* Each question is a button that takes the page to it. */
.home-page .asks button{all:unset;flex:1;cursor:pointer;font:inherit;color:inherit;text-align:left}
.home-page .asks button:hover{color:#000b2d}
.home-page .asks button:focus-visible{outline:2px solid #000b2d;outline-offset:4px}
/* A label's dot takes the colour of the change it names. */
.home-page.one-city .pin i{background:var(--dot,#fd4b08);box-shadow:0 0 0 5px color-mix(in srgb,var(--dot,#fd4b08) 25%,transparent)}
/* The fourth question's card: the three changes against one goal, a bar each
   and the goal's line, lit one after another as the city shows each change;
   the bus line that crosses the line stays lit. No figures: the bars are no
   measured result. */
.home-page .goal-card{position:absolute;right:48px;top:118px;width:330px;padding:18px 20px 20px;background:#000b2d;color:#fff;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.home-page .goal-card[data-shown]{opacity:1;transform:none}
.home-page .goal-card p{margin:0 0 14px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#9fb0d6;white-space:nowrap}
.home-page .goal-rows{position:relative;display:grid;gap:12px}
.home-page .goal-rows>div{display:grid;grid-template-columns:128px 1fr;align-items:center;gap:12px;font-size:14px;font-weight:700;color:#b9c4da;white-space:nowrap;transition:color .3s}
.home-page .goal-rows>div span{overflow:hidden;text-overflow:ellipsis}
.home-page .goal-rows b{display:block;height:10px;width:calc(var(--bar)*100%);background:#4a5370;transition:background .3s}
.home-page .goal-rows>div[data-current]{color:#fff}
.home-page .goal-rows>div[data-current] b{background:#9fb0d6}
.home-page .goal-rows>div[data-won] b{background:#fd4b08}
.home-page .goal-line{position:absolute;top:-4px;bottom:-4px;left:calc(140px + (100% - 140px)*.72);border-left:1px dashed #fff}

/* A screen's shading ends with its own screen. The side
   effects shade the city's right side and the screen after them does not, so
   shading carried half a screen into it left a hard band across the city. */
.home-page .screen.tall{overflow:clip}


/* Three real Polycity screens for the side effect picked in the box: the
   headline figure on the map in a large window, every figure of its group and
   the figure over the day in two smaller ones beside it. Only the lit set is
   drawn, so a set's pictures load when it is reached, and it fades in. */
.home-page .outcome-screens{--big:clamp(200px,calc((100svh - 580px)*1.6),460px);margin-bottom:26px}
.home-page .screen-set{display:none;grid-template-columns:var(--big) calc(var(--big)*.44);gap:12px 16px;align-items:start}
.home-page .screen-set[data-current]{display:grid;animation:screen-set-in .45s ease-out}
.home-page .screen-shot{display:block;min-width:0;color:inherit;text-decoration:none}
.home-page .screen-shot.big{grid-row:1/3}
.home-page .screen-shot span{display:block;margin-bottom:7px;font-size:11px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:#4a5370;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-page .screen-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top left;background:#e9ebee;border:1px solid #b9c4da;border-radius:6px;box-shadow:0 14px 30px rgba(0,11,45,.16);transition:box-shadow .2s}
.home-page .screen-shot:hover img{box-shadow:0 18px 38px rgba(0,11,45,.28)}
@keyframes screen-set-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* The last item, every effect at once: the camera stands back from the whole
   city and a few large windows of real screens come up over it, one after
   another, left to right: a dot lights on a place, a line is drawn from it up
   to its window, then the window rises. Each window turns through the
   screens home-every.js hands it, one kind after another, and its dot and
   line glide to the place each new screen measures. The lines lie under
   every window. The screens wait in a pool that is never drawn, so their
   pictures load only once a window takes them. */
.home-page .every-effect{position:fixed;inset:0;z-index:3;overflow:hidden;pointer-events:none;display:none}
.home-page .every-effect[data-ready]{display:block}
.home-page .effect-pool{display:none}
.home-page .effect{--w:clamp(150px,17vw,330px);position:absolute;inset:0}
.home-page .effect-line{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible}
.home-page .effect-line line{stroke:#000b2d;stroke-opacity:.5;stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s ease-out}
.home-page .effect i{position:absolute;left:0;top:0;z-index:1;transform:translate(var(--x,-99px),var(--y,-99px))}
.home-page .effect i:before{content:'';position:absolute;left:-6px;top:-6px;width:12px;height:12px;border-radius:50%;background:#fd4b08;box-shadow:0 0 0 5px rgba(253,75,8,.22);transform:scale(0);transition:transform .25s}
.home-page .effect-window{position:absolute;z-index:2;display:grid;left:calc(var(--sx)*100vw - var(--w)/2);top:calc(var(--sy)*100svh);width:var(--w);padding:8px;background:#fff;border:1px solid #b9c4da;border-radius:9px;box-shadow:0 22px 48px rgba(0,11,45,.26);opacity:0;transform:translateY(14px) scale(.86);transform-origin:50% 100%;transition:opacity .3s,transform .45s cubic-bezier(.2,1.4,.4,1)}
.home-page .effect-screen{grid-area:1/1;margin:0;min-width:0}
/* The pictures cross over; a caption goes before the next one comes, so two
   never stand on each other. */
.home-page .effect-screen figcaption{margin:0 2px 7px;font-size:12px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:#4a5370;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .25s}
.home-page .effect-screen>div{aspect-ratio:16/10;overflow:hidden;border-radius:5px;background:#e9ebee;opacity:0;transition:opacity .6s}
.home-page .effect-screen img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
.home-page .effect-screen[data-current] figcaption{opacity:1;transition-delay:.25s}
.home-page .effect-screen[data-current]>div{opacity:1}
.home-page .effect[data-shown] i:before{transform:scale(1);transition:transform .25s calc(var(--k)*.12s)}
.home-page .effect[data-shown] .effect-line line{stroke-dashoffset:0;transition-delay:calc(var(--k)*.12s + .1s)}
.home-page .effect[data-shown] .effect-window{opacity:1;transform:none;transition-delay:calc(var(--k)*.12s + .4s)}
@media(max-width:760px){
 .home-page .effect{--w:160px}
 .home-page .effect i:before{left:-5px;top:-5px;width:10px;height:10px;box-shadow:0 0 0 4px rgba(253,75,8,.22)}
 .home-page .effect-window{padding:5px;border-radius:7px;box-shadow:0 12px 26px rgba(0,11,45,.22)}
 .home-page .effect-screen figcaption{margin:0 1px 4px;font-size:9px;letter-spacing:.06em}
 .home-page .effect-screen>div{border-radius:4px}
}
/* The optimisations: one column down the left, the line, the heading, the
   kinds, the kind's sentence and its windows, and the city's drawing of the
   kind on the right. The kinds stand in one dock of round icon buttons in
   two groups, buses and trams then traffic lights, each named small over its
   part and split by a thin line. Each icon takes its group's colour. Only the
   picked kind shows its name: its button opens into a navy bar round an
   orange ring, which on the optimisations fills a fifth for each stage its
   search reaches (home-scene.js sets --done). A pointer over another icon
   lifts it and shows its name in a small dark label under it. The side
   effects take the same column and dock, in their own two groups, how
   people travel then what it does to the city. */
.home-page .screen.optimise .screen-words,.home-page .screen.outcomes .screen-words{justify-content:center;padding-top:96px;padding-bottom:32px}
/* Every effect at once has no windows of its own, so the column stands from
   the top and the heading never moves between presses. */
.home-page.one-city .screen.outcomes .screen-words{justify-content:flex-start;padding-top:min(150px,14svh)}
.home-page .optimise-words{display:flex;flex-direction:column;max-width:700px}
.home-page .optimise-words .eyebrow{margin-bottom:16px}
.home-page .optimise-kinds{position:relative;align-self:flex-start;display:flex;align-items:center;margin-top:calc(min(28px,2.8svh) + 24px);padding:6px;background:rgba(255,255,255,.92);border:1px solid #c9d0de;border-radius:30px;box-shadow:0 10px 26px rgba(0,11,45,.08)}
.home-page .kind-group{position:relative;display:flex;align-items:center;gap:6px}
.home-page .kind-group+.kind-group{margin-left:9px;padding-left:9px;border-left:1px solid #d3d9e6}
.home-page .kind-group.bus{--kind:#8a5bd6}.home-page .kind-group.lights{--kind:#1f9d55}.home-page .kind-group.travel{--kind:#2b7fd0}.home-page .kind-group.town{--kind:#d2721f}
.home-page .optimise-group{position:absolute;left:6px;bottom:calc(100% + 15px);margin:0;font-size:11px;font-weight:750;line-height:1;letter-spacing:.12em;text-transform:uppercase;color:#8a97b4;white-space:nowrap}
.home-page .kind-group+.kind-group .optimise-group{left:15px}
.home-page .optimise-kinds button{position:relative;display:flex;align-items:center;gap:9px;height:40px;min-width:40px;margin:0;padding:0;border:1px solid #dde2ec;border-radius:20px;background:#f3f5fa;font:inherit;font-size:15px;font-weight:800;line-height:1;letter-spacing:-.005em;color:var(--kind);white-space:nowrap;cursor:pointer;transition:transform .2s,box-shadow .2s,background-color .2s,border-color .2s}
.home-page .kind-ring{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;flex:none}
.home-page .kind-ring .icon{position:relative;width:20px;height:20px;stroke-width:1.7}
/* The name of a kind not picked is its button's label for a screen reader,
   and shows as the pointer's label. */
.home-page .optimise-kinds button>span{position:absolute;left:50%;top:calc(100% + 9px);z-index:3;padding:5px 9px;border-radius:5px;background:#000b2d;color:#fff;font-size:12px;font-weight:700;letter-spacing:0;transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .15s}
.home-page .optimise-kinds button:not([data-current]):hover{transform:translateY(-2px);background:#fff;border-color:#9aa6c0;box-shadow:0 5px 12px rgba(0,11,45,.16)}
.home-page .optimise-kinds button:not([data-current]):hover>span,.home-page .optimise-kinds button:not([data-current]):focus-visible>span{opacity:1}
.home-page .optimise-kinds button[data-current]{padding-right:17px;border-color:#000b2d;background:#000b2d;color:#fff;box-shadow:0 5px 14px rgba(0,11,45,.3);cursor:default}
.home-page .optimise-kinds button[data-current] .kind-ring{width:32px;height:32px;margin-left:3px;background:#fd4b08}
.home-page .screen.optimise button[data-current] .kind-ring{background:conic-gradient(#fd4b08 calc(var(--done,1)*100%),rgba(255,255,255,.2) 0)}
.home-page .screen.optimise button[data-current] .kind-ring:before{content:"";position:absolute;inset:3px;border-radius:50%;background:#1c2748}
.home-page .optimise-kinds button[data-current] .kind-ring .icon{width:17px;height:17px;stroke-width:1.9}
.home-page .screen.optimise button[data-current] .kind-ring .icon{color:#fd4b08}
.home-page .optimise-kinds button[data-current]>span{position:static;padding:0;background:none;font-size:15px;font-weight:800;transform:none;opacity:1;overflow:hidden;animation:kind-open .35s ease-out}
@keyframes kind-open{from{max-width:0;opacity:0}to{max-width:320px;opacity:1}}
.home-page .optimise-kinds button:focus-visible{outline:2px solid #3f6bff;outline-offset:2px}
.home-page .kind-name{display:none}
.home-page .optimise-copy .copy{display:none;margin:min(30px,3svh) 0 0;max-width:560px}
.home-page .optimise-copy .copy[data-current]{display:block}
.home-page .optimise-words .outcome-screens{margin:min(22px,2.2svh) 0 0}

/* A film in a window beside the words: the deck's goal film on the AI
   screen. */
.home-page .home-film{position:absolute;top:96px;bottom:40px;right:48px;width:min(44vw,calc((100svh - 190px)*16/9));display:flex;align-items:center;pointer-events:none}
.home-page .home-film .film-window{width:100%;margin:0;background:#000b2d;box-shadow:0 30px 70px rgba(0,11,45,.32);pointer-events:auto}
.home-page .home-film .film-band{display:block;height:5px;background:linear-gradient(90deg,#0ad6ed,#3f6bff,#9a4dff,#d63aa4,#fd4b08)}
.home-page .home-film figcaption{display:flex;align-items:center;gap:12px;height:40px;padding:0 16px;font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-page .home-film figcaption:before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:#fd4b08;box-shadow:0 0 0 4px rgba(253,75,8,.25)}
.home-page .home-film .film-reel{position:relative;aspect-ratio:16/9;margin:0 10px 10px;background:#f6f7fb;overflow:hidden}
.home-page .home-film video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
/* The AI screen's window holds two films and shows the one being read. */
.home-page .home-film .film-window[data-ai-film]:not([data-current]){display:none}

/* 03 Today's city, built and checked: the words at the top left on paper,
   the veil ending above the stack of files, so the stack lies in full colour
   as in the deck. Each file's tag stands beside its hanging page, and the fit
   card under the counting place's pin (home-checked.js). */
.home-page .screen.checked .screen-words{justify-content:flex-start;padding-top:120px}
.home-page .screen.checked:before{background:linear-gradient(90deg,rgba(246,247,251,.96) 0,rgba(246,247,251,.9) 26%,rgba(246,247,251,0) 52%);-webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 64%);mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 64%)}
.home-page .screen.checked h2{font-size:clamp(38px,3.7vw,64px);max-width:600px}
.home-page .screen.checked .copy{margin-top:20px;max-width:460px;font-size:16px;line-height:1.6;color:#1d2747}
/* Baseline and scenarios leaves the same gap under its heading as Today's city.
   Its words keep to a column on the left, so the copies of the city and their
   branches stand clear of them (home-scenarios.js). */
.home-page .screen.scenarios .copy{margin-top:20px;max-width:min(460px,36vw)}
.home-page.one-city .file-tag{transform:translate(var(--x),var(--y)) translate(-7px,-50%)}
.home-page .how-card{position:absolute;background:#fff;color:#000b2d;box-shadow:0 14px 34px rgba(0,11,45,.2);padding:14px 16px;opacity:0;transition:opacity .35s;pointer-events:none}
.home-page .how-card[data-shown]{opacity:1}
.home-page .how-card .card-title{margin:0 0 10px;font-size:11px;line-height:1.3;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.home-page .how-card .card-key{display:flex;align-items:center;gap:6px;margin:10px 0 0;font-size:11px;line-height:1.3;color:#52607d}
.home-page .how-card .card-key i{display:inline-block;width:12px;height:4px;background:#fd4b08;margin-left:6px}
.home-page .how-card .card-key i:first-child{margin-left:0}
.home-page .how-card .card-key .key-tick{width:2px;height:12px;background:#000b2d}
.home-page .how-card .card-key .key-dashed{height:0;background:none;border-top:2px dashed #000b2d}
.home-page .how-card .card-key .key-today{background:#000b2d}
/* The four attempts: the model's dot and the survey's tick on a track to
   60% for each way, the gap between them shaded; how far off the model is;
   the three steps of an attempt with the dial; and the stamp on the last. */
.home-page .fit-card{right:48px;top:120px;width:310px}
.home-page .fit-card .card-title{display:flex;justify-content:space-between;gap:12px;white-space:nowrap}
.home-page .fit-attempt{color:#52607d}
.home-page .fit-attempt b{color:#000b2d}
.home-page .fit-rows>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:center;height:22px;font-size:12px;white-space:nowrap}
.home-page .fit-track{position:relative;height:6px;background:#e4eaf4}
.home-page .fit-track i{position:absolute;top:0;bottom:0}
.home-page .fit-gap{left:min(var(--m,0%),var(--s,0%));width:calc(max(var(--m,0%),var(--s,0%)) - min(var(--m,0%),var(--s,0%)));background:rgba(253,75,8,.25)}
.home-page .fit-survey{left:var(--s,0%);top:-4px!important;bottom:-4px!important;width:2px;margin-left:-1px;background:#000b2d}
.home-page .fit-model{left:var(--m,0%);top:-3px!important;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#fd4b08;transition:left .2s}
.home-page .fit-off{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:10px;padding-top:8px;border-top:1px solid #e4eaf4;font-size:12px;white-space:nowrap}
.home-page .fit-off b{font-size:24px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.home-page .fit-steps{display:grid;grid-template-columns:28px repeat(3,1fr);align-items:center;margin-top:10px;border:1px solid #d6dbe7}
.home-page .fit-steps span{padding:6px 4px;border-left:1px solid #d6dbe7;font-size:11px;font-weight:750;text-align:center;color:#7d88a3;white-space:nowrap;transition:background .2s,color .2s}
.home-page .fit-steps span[data-current]{background:#ae157e;color:#fff}
.home-page .fit-dial{width:22px;height:22px;margin:0 3px}
.home-page .fit-dial circle{fill:none;stroke:#000b2d;stroke-width:2.5}
.home-page .fit-dial path{stroke:#000b2d;stroke-width:2.5}
.home-page .fit-hand{stroke:#ae157e;stroke-width:4;stroke-linecap:round;transition:transform .2s}
.home-page .fit-card .stamp{position:absolute;right:16px;bottom:6px;margin:0;font-size:18px;padding:4px 10px;background:#fff}
.home-page .fit-card[data-approved] .fit-model{background:#217b9b}
.home-page .stamp{display:inline-block;margin:18px 0 0 36px;border:3px solid #217b9b;color:#217b9b;font-size:26px;line-height:1.2;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;padding:6px 16px;opacity:var(--land,0);transform:rotate(-6deg) scale(calc(1.6 - .6*var(--land,0)))}

/* 09 Compare and decide: the proposal across the whole city; over it the key
   to the change colours, the versions as each is reached, and the report
   rising. The column being read stands out. Paper stands behind the heading
   and behind the rows, so no building or train runs under the words, and
   the city keeps the band between them. */
.home-page.one-city .screen.comparison:before{background:linear-gradient(180deg,rgba(246,247,251,.96) 0,rgba(246,247,251,.93) 290px,rgba(246,247,251,0) 350px),linear-gradient(0deg,rgba(246,247,251,.97) 0,rgba(246,247,251,.93) 230px,rgba(246,247,251,0) 290px)}
.home-page .compare-cards{position:absolute;inset:0;pointer-events:none}
.home-page .change-key{right:48px;top:470px;margin:0;display:flex;align-items:center;gap:10px;font-size:12px;font-weight:750;padding:10px 14px;white-space:nowrap}
.home-page .change-key i{width:80px;height:7px;background:linear-gradient(90deg,#049dd6,#febe11,#fd4b08)}
.home-page .versions{position:absolute;right:48px;top:470px;width:300px;margin:0;padding:0;list-style:none;opacity:0;transition:opacity .35s}
.home-page .versions[data-shown]{opacity:1}
.home-page .versions li{margin-bottom:6px;padding:9px 14px;background:#fff;color:#52607d;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 8px 20px rgba(0,11,45,.12);opacity:0;transition:opacity .3s}
.home-page .versions li[data-reached]{opacity:1;color:#6b7793}
.home-page .versions li[data-current]{opacity:1;color:#000b2d;font-weight:800;box-shadow:inset 3px 0 0 #fd4b08,0 8px 20px rgba(0,11,45,.16)}
.home-page .how-card.report{left:50%;top:clamp(250px,32svh,330px);width:300px;margin-left:-150px;opacity:var(--rise,0);transform:translateY(calc((1 - var(--rise,0))*50px));transition:none}
.home-page .report-title{margin:0 0 6px;font-size:22px;line-height:1.2;font-weight:800;letter-spacing:-.02em}
.home-page .report-bar{margin-top:10px;font-size:11px;font-weight:650}
.home-page .report-bar i{display:block;width:var(--w);height:6px;margin-top:4px;background:#000b2d}
.home-page .report-bar i+i{background:#fd4b08}
.home-page .screen.comparison .three>div{transition:opacity .3s}
.home-page .screen.comparison .three:has([data-current])>div:not([data-current]){opacity:.45}

/* A screen's film step: its last screen of scroll, where a film of the
   application stands in the city's place, in the Europe deck's frame: the
   colour band on top, a navy strip with the film's name, the picture, and a
   bar that fills as the film plays. Beside the words on the right on Any
   question and What a simulation is; over the city and above the cards or
   rows on the three kinds and the comparison (.over). It rises in as its step
   begins (home-films.js). */
.home-page .step-film{position:absolute;top:96px;bottom:40px;right:48px;width:min(50vw,calc(100vw - 740px),calc((100svh - 190px)*16/9));display:flex;align-items:center;pointer-events:none;opacity:0;transform:translateY(18px);transition:opacity .4s,transform .45s}
.home-page .step-film[data-shown]{opacity:1;transform:none}
.home-page .step-film:has(.wall){width:min(50vw,calc(100vw - 740px),calc((100svh - 190px)*1280/648))}
.home-page .step-film.over{top:var(--film-top,250px);bottom:var(--film-bottom,190px);left:0;right:0;width:auto;justify-content:center}
.home-page .step-film.over .film-window{width:min(56vw,calc((100svh - var(--film-top,250px) - var(--film-bottom,190px) - 66px)*16/9))}
.home-page .screen.kinds .step-film{--film-top:240px;--film-bottom:200px}
.home-page .screen.comparison .step-film{--film-top:300px;--film-bottom:180px}
.home-page .step-film .film-window{width:100%;margin:0;background:#000b2d;box-shadow:0 30px 70px rgba(0,11,45,.32)}
.home-page .step-film[data-shown] .film-window{pointer-events:auto}
.home-page :is(.step-film,.film-viewer:not(.screen-viewer)) .film-band{display:block;height:5px;background:var(--spectrum)}
.home-page :is(.step-film,.film-viewer:not(.screen-viewer)) figcaption{display:flex;align-items:center;gap:12px;height:40px;padding:0 16px;font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-page :is(.step-film,.film-viewer:not(.screen-viewer)) figcaption:before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--family,#fd4b08);box-shadow:0 0 0 4px color-mix(in srgb,var(--family,#fd4b08) 25%,transparent)}
/* A change's family before its name, in the family's colour. */
.home-page :is(.step-film,.film-viewer:not(.screen-viewer)) .film-family:not(:empty){flex:none;color:var(--family)}
.home-page :is(.step-film,.film-viewer:not(.screen-viewer)) .film-family:not(:empty):after{content:'·';margin-left:10px;color:rgba(255,255,255,.45)}
.home-page :is(.step-film,.film-viewer:not(.screen-viewer)) .film-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.home-page .step-film .tile-name:not([hidden]){display:flex;gap:10px;min-width:0}
/* The ring round the wall's tile under the pointer. */
.home-page .step-film .tile-ring{position:absolute;z-index:1;display:none;pointer-events:none;box-shadow:inset 0 0 0 2px var(--family,#fff),0 0 0 2px rgba(0,11,45,.55)}
.home-page .step-film .tile-ring.on{display:block}
.home-page :is(.step-film,.film-shot) .film-reel{position:relative;aspect-ratio:16/9;margin:0 10px;background:#f6f7fb;overflow:hidden}
.home-page :is(.step-film,.film-shot) .film-reel video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;cursor:pointer}
.home-page .step-film .film-played{height:12px;padding:4px 10px}
.home-page :is(.step-film,.film-shot) .film-played i{display:block;height:100%;width:0;background:var(--spectrum)}
.home-page .step-film .wall .film-reel{aspect-ratio:1280/648}
.home-page .step-film .film-window[data-upright] .film-reel{aspect-ratio:720/1312}
/* A window that grows out of the city (home-films.js): shrunk over its place
   with the orange frame of the junction study round it until its step shows,
   then grown to its own place. Hidden again, it fades before it shrinks. */
.home-page .step-film[data-grow]{transform:none}
.home-page .step-film[data-grow] .film-window.grows{transform-origin:0 0;transform:var(--grow,none);box-shadow:0 0 0 4px #fd4b08;transition:transform 0s .45s,box-shadow 0s .45s}
.home-page .step-film[data-grow][data-shown] .film-window.grows{transform:none;box-shadow:0 0 0 4px rgba(253,75,8,0),0 30px 70px rgba(0,11,45,.32);transition:transform .9s cubic-bezier(.2,.7,.2,1),box-shadow .7s .8s}
[data-motion=still] .home-page .step-film[data-grow] .film-window.grows{transform:none;box-shadow:0 30px 70px rgba(0,11,45,.32);transition:none}
.home-page .step-film .film-note{flex:none;color:rgba(255,255,255,.55);font-weight:600}
/* Three kinds' push into the junction: the list of junctions worst first
   beside the replay of the worst, both as tall as the space between the
   heading and the cards allows. The list comes once the replay has grown. */
.home-page .step-film.dive{--reel-h:min(calc(40vw*664/1280),calc(100svh - var(--film-top,250px) - var(--film-bottom,190px) - 66px));gap:16px}
.home-page .step-film.dive .film-window.grows{width:calc(var(--reel-h)*1280/664 + 20px);flex:none}
.home-page .step-film.dive .grows .film-reel{aspect-ratio:1280/664}
.home-page .step-film.dive .film-window.worst{order:-1;flex:none;width:calc(var(--reel-h)*554/720 + 20px);opacity:0;transform:translateX(24px);transition:opacity .4s,transform .4s}
.home-page .step-film.dive[data-shown] .film-window.worst{opacity:1;transform:none;transition:opacity .45s .85s,transform .5s .85s}
.home-page .step-film.dive .worst .film-reel{aspect-ratio:554/720}
.home-page .step-film .worst-row{display:none}
/* The closing's flight over the cities, top right, clear of the words at
   the foot. */
.home-page .step-film.cities{top:110px;bottom:auto;align-items:flex-start;width:min(44vw,calc(100vw - 800px),calc((100svh - 420px)*16/9))}
/* AI first's two films stand together: the one playing in the large window,
   the other waiting under it as a small picture with a play mark and its
   name beside it, on one line where there is room and on two where the
   screen is narrow, never cut. A press on the waiting one swaps the two
   (home-films.js). */
.home-page .step-film.pair{flex-direction:column;justify-content:center;align-items:flex-end;gap:14px}
.home-page .step-film .film-window[data-waiting]{display:flex;align-items:center;gap:14px;width:auto;max-width:100%;padding:7px 20px 7px 7px;background:rgba(0,11,45,.86);border:1px solid #4a5684;box-shadow:0 14px 30px rgba(0,0,0,.3);cursor:pointer;transition:border-color .2s,background-color .2s}
.home-page .step-film .film-window[data-waiting]:hover{border-color:#a9b4d6;background:#000b2d}
.home-page .step-film .film-window[data-waiting]:focus-visible{outline:2px solid #3f6bff;outline-offset:3px}
.home-page .step-film .film-window[data-waiting] :is(.film-band,.film-played){display:none}
.home-page .step-film .film-window[data-waiting] .film-reel{order:-1;flex:none;width:150px;max-width:36%;margin:0;pointer-events:none}
.home-page .step-film .film-window[data-waiting] .film-reel:before{content:'';position:absolute;z-index:1;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#000b2d;box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.home-page .step-film .film-window[data-waiting] .film-reel:after{content:'';position:absolute;z-index:1;left:50%;top:50%;margin:-7px 0 0 -4px;border-left:12px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.home-page .step-film .film-window[data-waiting] figcaption{min-width:0;height:auto;padding:0;font-size:15px;line-height:1.3;white-space:normal}
.home-page .step-film .film-window[data-waiting] figcaption:before{display:none}
/* A film as the big window of an optimisation's or a side effect's set: its
   name above it like a screenshot's, and its bar under it. */
.home-page .film-shot{grid-row:1/3;min-width:0;margin:0}
.home-page .film-shot>span{display:block;margin-bottom:7px;font-size:11px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:#4a5370;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-page .film-shot .film-reel{margin:0;background:#000b2d;border:1px solid #b9c4da;border-radius:6px;box-shadow:0 14px 30px rgba(0,11,45,.16)}
.home-page .film-shot .film-played{height:7px;padding:3px 0 0}
/* The film viewer: a pressed film, large over the dimmed page, in the same
   frame, with its controls. --ratio is the film's own width over its height.
   The viewer takes the focus itself on opening, so no button wears a ring
   nobody asked for, and the arrow keys reach it at once. */
.home-page .film-viewer:not(.screen-viewer){padding:0;border:0;background:none;max-width:none;max-height:none;overflow:visible}
.home-page .film-viewer:not(.screen-viewer)::backdrop{background:rgba(0,11,45,.84)}
.home-page .film-viewer:not(.screen-viewer):focus{outline:none}
.home-page .film-viewer:not(.screen-viewer) .film-window{width:min(94vw,calc((88svh - 60px)*var(--ratio,1.7778)));margin:0;background:#000b2d;box-shadow:0 40px 90px rgba(0,0,0,.45)}
.home-page .film-viewer:not(.screen-viewer) :is(.film-step,.film-close){flex:none;width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;background:none;color:#fff;cursor:pointer}
.home-page .film-viewer:not(.screen-viewer) .film-step{display:none}
.home-page .film-viewer:not(.screen-viewer)[data-change] .film-step{display:grid}
.home-page .film-viewer:not(.screen-viewer) .film-step:first-of-type{margin-left:auto}
.home-page .film-viewer:not(.screen-viewer) .film-close{margin:0 -8px 0 auto}
.home-page .film-viewer:not(.screen-viewer)[data-change] .film-close{margin-left:0}
.home-page .film-viewer:not(.screen-viewer) .icon{width:20px;height:20px;stroke-width:1.8}
.home-page .film-viewer:not(.screen-viewer) button:focus-visible{outline:1px solid rgba(255,255,255,.45);outline-offset:-4px}
.home-page .film-viewer:not(.screen-viewer) .film-reel{position:relative;aspect-ratio:var(--ratio,1.7778);margin:0 10px 10px;background:#000b2d;overflow:hidden}
.home-page .film-viewer:not(.screen-viewer) video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain}
@media(max-width:760px){
 /* Today's city on a phone: the words at the foot, the fit card at the top. */
 .home-page .screen.checked .screen-words{justify-content:flex-end;padding-top:0;padding-bottom:max(30px,11svh)}
 .home-page .screen.checked:before{background:linear-gradient(0deg,rgba(246,247,251,.97) 0,rgba(246,247,251,.9) 30%,rgba(246,247,251,0) 40%);-webkit-mask-image:none;mask-image:none}
 .home-page .screen.checked h2{font-size:clamp(28px,8.4vw,34px)}
 .home-page .screen.checked .copy{margin-top:8px;font-size:12px;line-height:1.5}
 .home-page .screen.scenarios .copy{margin-top:8px;max-width:none}
 .home-page .fit-card{left:16px;right:16px;top:72px;width:auto;padding:10px 14px 12px}
 .home-page .fit-card .card-title{margin-bottom:6px}
 .home-page .fit-rows>div{height:18px;grid-template-columns:88px minmax(0,1fr)}
 .home-page .fit-card .card-key{display:none}
 .home-page .fit-off{margin-top:6px;padding-top:6px}
 .home-page .fit-off b{font-size:20px}
 .home-page .fit-steps{margin-top:6px}
 .home-page .fit-card .stamp{bottom:6px;font-size:15px}
 /* The comparison's paper is shallower, and its cards stand in the band of
    city under the heading. */
 .home-page.one-city .screen.comparison:before{background:linear-gradient(180deg,rgba(246,247,251,.96) 0,rgba(246,247,251,.93) 215px,rgba(246,247,251,0) 260px),linear-gradient(0deg,rgba(246,247,251,.98) 0,rgba(246,247,251,.93) 260px,rgba(246,247,251,0) 310px)}
 .home-page .change-key,.home-page .versions{right:auto;left:20px;top:372px}
 .home-page .versions{width:auto;right:20px}
 .home-page .versions li{font-size:12px;padding:8px 12px}
 .home-page .how-card.report{top:208px;width:280px;margin-left:-140px}
 /* A film step on a phone: the film spans the width under the header, over
    the city, and the words stand at the foot. On the comparison it stands
    under the heading. A tap opens a film across the whole screen. */
 .home-page .step-film,.home-page .step-film.over{top:86px;bottom:auto;left:0;right:0;width:auto;display:block}
 .home-page .screen.comparison .step-film{top:clamp(200px,26svh,230px)}
 .home-page .step-film .film-window,.home-page .step-film.over .film-window{width:auto;margin:0 12px}
 .home-page :is(.step-film,.film-viewer:not(.screen-viewer)) figcaption{height:32px;font-size:11px;padding:0 12px}
 .home-page .step-film .film-reel{margin:0 6px}
 .home-page .step-film .film-played{height:10px;padding:3px 6px}
 .home-page .step-film .wall[data-upright]{width:min(56vw,calc((100svh - 600px)*720/1312 + 12px));margin:0 auto}
 /* AI first's waiting film is a row under the playing one. */
 .home-page .step-film.pair{display:block}
 /* The push into the junction on a phone: the replay alone, and the list's
    top row under it. */
 .home-page .step-film.dive .film-window.worst{display:none}
 .home-page .step-film.dive .film-window.grows{width:auto}
 .home-page .step-film .worst-row{display:flex;align-items:center;gap:8px;margin:8px 12px 0;padding:8px 10px;border:1px solid #d6dbe7;background:#fff;font-size:12px;color:#000b2d;white-space:nowrap;box-shadow:0 10px 24px rgba(0,11,45,.16);opacity:0;transition:opacity .4s}
 .home-page .step-film.dive[data-shown] .worst-row{opacity:1;transition-delay:.85s}
 .home-page .step-film .worst-row b{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e0261a;color:#fff;font-size:10px}
 .home-page .step-film .worst-row span:first-of-type{min-width:0;overflow:hidden;text-overflow:ellipsis;font-weight:700}
 .home-page .step-film .worst-row span:last-child{margin-left:auto;flex:none;color:#4a5578}
 .home-page .step-film.cities{top:86px;width:auto}
 .home-page .step-film .film-window[data-waiting]{margin:10px 12px 0;gap:10px;padding:6px 10px 6px 6px}
 .home-page .step-film .film-window[data-waiting] .film-reel{width:88px;margin:0}
 .home-page .step-film .film-window[data-waiting] figcaption{height:auto;padding:0;font-size:11px}
 .home-page .film-shot{grid-row:auto;grid-column:1/3}
 .home-page .film-shot>span{margin-bottom:4px;font-size:8px;letter-spacing:.06em}
 .home-page .film-shot .film-reel{border-radius:4px;box-shadow:0 8px 18px rgba(0,11,45,.16)}
 /* The viewer's strip keeps the change's own name whole on a phone; its
    family is the dot's colour. */
 .home-page .film-viewer:not(.screen-viewer) .film-family{display:none}
}
@media(prefers-reduced-motion:reduce){
 .home-page .how-card,.home-page .fit-pane,.home-page .versions,.home-page .versions li,.home-page .screen.comparison .three>div,.home-page .step-film{transition:none}
}

/* A pressed screenshot of the application, large over the dimmed page in the
   films' frame, with a cross to close it and arrows through its set. The page
   behind holds still while it is open. */
html:has(.screen-viewer[open]){overflow:hidden}
.home-page .screen-viewer{--ratio:1.6;padding:0;border:0;background:none;max-width:none;max-height:none;overflow:visible}
.home-page .screen-viewer::backdrop{background:rgba(0,11,45,.84)}
.home-page .screen-viewer:focus{outline:none}
.home-page .screen-viewer .film-window{width:min(94vw,calc((88svh - 60px)*var(--ratio)));margin:0;background:#000b2d;box-shadow:0 40px 90px rgba(0,0,0,.45)}
.home-page .screen-viewer .film-band{display:block;height:5px;background:linear-gradient(90deg,#0ad6ed,#3f6bff,#9a4dff,#d63aa4,#fd4b08)}
.home-page .screen-viewer figcaption{display:flex;align-items:center;gap:12px;height:40px;padding:0 16px;font-size:13px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden}
.home-page .screen-viewer figcaption:before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--family);box-shadow:0 0 0 4px color-mix(in srgb,var(--family) 25%,transparent)}
.home-page .screen-viewer .film-family:not(:empty){flex:none;color:var(--family)}
.home-page .screen-viewer .film-family:not(:empty):after{content:'·';margin-left:10px;color:rgba(255,255,255,.45)}
.home-page .screen-viewer .film-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.home-page .screen-viewer :is(.film-step,.film-close){flex:none;width:36px;height:36px;display:grid;place-items:center;padding:0;border:0;background:none;color:#fff;cursor:pointer}
.home-page .screen-viewer .film-step{display:none}
.home-page .screen-viewer[data-change] .film-step{display:grid}
.home-page .screen-viewer .film-step:first-of-type{margin-left:auto}
.home-page .screen-viewer .film-close{margin:0 -8px 0 auto}
.home-page .screen-viewer[data-change] .film-close{margin-left:0}
.home-page .screen-viewer .icon{width:20px;height:20px;stroke-width:1.8}
.home-page .screen-viewer button:focus-visible{outline:1px solid rgba(255,255,255,.45);outline-offset:-4px}
.home-page .screen-viewer .film-reel{position:relative;aspect-ratio:var(--ratio);margin:0 10px 10px;background:#f6f7fb;overflow:hidden}
.home-page .screen-viewer img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain}

@media(max-width:1100px){
 .home-page .home-film{width:min(44vw,calc((100svh - 190px)*16/9))}
}
@media(max-width:760px){
 /* On a phone the words stand at the foot over a wash of paper, or navy at
    dusk; a film or a card takes the top under the header. */
 .home-page .screen.questions .screen-words,.home-page .screen.ai .screen-words{justify-content:flex-end}
 /* Words in the last tenth of a phone's screen never count as arrived, so
    the words end above it, as on Features. */
 .home-page.one-city .screen.questions .screen-words,.home-page.one-city .screen.ai .screen-words,.home-page.one-city .screen.outcomes .screen-words,.home-page.one-city .screen.optimise .screen-words{padding-bottom:calc(10svh + 16px)}
 .home-page .screen.questions:before{background:linear-gradient(180deg,rgba(246,247,251,.92) 0,rgba(246,247,251,0) 110px),linear-gradient(0deg,rgba(246,247,251,.98) 0,rgba(246,247,251,.92) 42%,rgba(246,247,251,0) 64%)}
 /* Baseline and scenarios, and AI first: the copies of the city take the
    top, so the wash darkens only the foot where the words stand. */
 .home-page .screen.scenarios .screen-words{justify-content:flex-end}
 .home-page.one-city .screen.scenarios .screen-words{padding-bottom:calc(10svh + 16px)}
 .home-page .screen.scenarios:before{background:linear-gradient(0deg,rgba(246,247,251,.98) 0,rgba(246,247,251,.92) 34%,rgba(246,247,251,0) 44%)}
 .home-page .screen.ai:before{background:linear-gradient(0deg,rgba(0,11,45,.97) 0,rgba(0,11,45,.92) 40%,rgba(0,11,45,0) 50%)}
 .home-page .screen.ai h2{font-size:clamp(28px,8.4vw,36px)}
 .home-page .screen.outcomes h2,.home-page .screen.optimise h2{font-size:clamp(24px,6.8vw,30px)}
 .home-page .screen.ai .copy{display:none}
 /* On a phone the cover stands at the foot, the name over the motto, and the
    city keeps the screen above them. */
 .home-page.one-city:not(.how-page) .screen.hero .screen-words{justify-content:flex-end;gap:clamp(16px,2.6svh,24px);padding-bottom:calc(4svh + 8px)}
 .home-page .cover-mark{width:clamp(44px,13vw,54px);margin-right:14px}
 .home-page .cover-word{font-size:clamp(26px,8vw,34px)}
 .home-page .cover-maker{gap:10px;margin-top:10px;padding-top:10px;font-size:12px}
 .home-page .cover-maker img{height:22px}
 .home-page:not(.how-page) .screen.hero h1{font-size:clamp(30px,9.4vw,44px);line-height:1.06}
 .home-page .asks{margin-top:16px}
 .home-page .asks li{font-size:14px;padding:10px 0;gap:10px}
 /* The label and the typed row make the list two lines taller; tighter rows
    keep the heading clear of the city above it. */
 .home-page .screen-words .asks-for{margin:12px 0 0}
 .home-page .screen-words .asks-for+.asks{margin-top:4px}
 .home-page .asks li{padding:7px 0}
 .home-page .asks-cursor{margin-left:-8px}
 /* Over the city at the top of the screen, under the header. */
 .home-page .goal-card{left:16px;right:16px;top:90px;width:auto;padding:10px 14px 12px}
 .home-page .goal-card p{margin-bottom:8px;font-size:10px}
 .home-page .goal-rows{gap:6px}
 .home-page .goal-rows>div{grid-template-columns:112px 1fr;gap:10px;font-size:12px}
 .home-page .goal-rows b{height:8px}
 .home-page .goal-line{left:calc(122px + (100% - 122px)*.72)}
 .home-page .home-film{top:92px;bottom:auto;left:12px;right:12px;width:auto;display:block}
 .home-page .home-film figcaption{height:32px;font-size:11px;padding:0 12px}
 .home-page .home-film .film-reel{margin:0 6px 6px}
 /* On a phone the viewer's strip keeps the picture's own name whole; the kind
    stays on the page behind. */
 .home-page .screen-viewer figcaption{height:40px;font-size:12px;padding:0 4px 0 12px;gap:6px}
 .home-page .screen-viewer .film-family{display:none}
 .home-page .screen-viewer .film-close{margin-right:0}
 .home-page .screen-viewer .film-reel{margin:0 6px 6px}
 /* On a phone the heading and the kinds stand at the top, the search plays
    over the middle of the frame, and the windows, three in a row, stand at
    the foot over the kind's sentence; the haze is thick over the words and
    clear between them. The side effects stand the same way, their close-up
    in the middle. */
 .home-page.one-city .screen.optimise:before,.home-page.one-city .screen.outcomes:before{background:linear-gradient(180deg,rgba(246,247,251,.96) 0,rgba(246,247,251,.9) 36%,rgba(246,247,251,0) 42%,rgba(246,247,251,0) 72%,rgba(246,247,251,.95) 79%)}
 .home-page.one-city .screen.optimise .screen-words,.home-page.one-city .screen.outcomes .screen-words{justify-content:space-between;padding-top:84px;padding-bottom:20px}
 .home-page .optimise-words{display:contents}
 .home-page .optimise-words .eyebrow{margin-bottom:6px;order:1}
 .home-page .screen.optimise h2,.home-page .screen.outcomes h2{order:2}
 /* On a phone the dock fills the width and every button stays round; the
    picked one turns navy, and its name, group and place stand on one line
    under the dock. */
 .home-page .optimise-kinds{order:3;align-self:stretch;justify-content:space-between;margin:14px 0 0;padding:5px;border-radius:26px}
 .home-page .kind-group{flex:1;justify-content:space-between;gap:3px}
 .home-page .screen.optimise .kind-group.bus{flex:2}
 .home-page .screen.outcomes .kind-group.travel{flex:1.5}
 .home-page .kind-group+.kind-group{margin-left:6px;padding-left:6px}
 .home-page .optimise-group{display:none}
 .home-page .optimise-kinds button,.home-page .optimise-kinds button[data-current]{width:40px;min-width:0;height:40px;padding:0;justify-content:center}
 .home-page .screen.outcomes .optimise-kinds button{width:28px;height:28px}
 .home-page .optimise-kinds button>span,.home-page .optimise-kinds button[data-current]>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;animation:none}
 .home-page .optimise-kinds button:not([data-current]):hover{transform:none;box-shadow:none}
 .home-page .optimise-kinds button[data-current] .kind-ring{width:100%;height:100%;margin:0;background:none}
 .home-page .screen.optimise button[data-current] .kind-ring{background:conic-gradient(#fd4b08 calc(var(--done,1)*100%),#3a4462 0)}
 .home-page .screen.optimise button[data-current] .kind-ring:before{background:#000b2d}
 .home-page .optimise-kinds button[data-current] .kind-ring .icon{color:#fd4b08}
 .home-page .screen.outcomes .kind-ring .icon{width:16px;height:16px}
 .home-page .kind-name{order:3;display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:8px 4px auto;line-height:1.2}
 .home-page .kind-name b{min-width:0;font-size:17px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .home-page .kind-name>span{flex:none;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8a97b4;white-space:nowrap}
 .home-page .optimise-words .outcome-screens{order:4;margin:0;--big:calc(100vw - 40px)}
 .home-page .optimise-words .screen-set{grid-template-columns:repeat(3,1fr);width:var(--big)}
 .home-page .optimise-words .screen-shot.big,.home-page .optimise-words .film-shot{grid-row:auto;grid-column:auto}
 .home-page .optimise-copy{order:5}
 .home-page .optimise-copy .copy{margin:10px 0 0;font-size:13px;line-height:1.5;color:#000b2d}
 .home-page .outcome-screens{--big:calc(100vw - 210px);margin-bottom:18px}
 .home-page .screen-set{grid-template-columns:1fr 1fr;width:var(--big);gap:6px 8px}
 .home-page .screen-shot.big{grid-row:auto;grid-column:1/3}
 .home-page .screen-shot span{margin-bottom:4px;font-size:8px;letter-spacing:.06em}
 .home-page .screen-shot img{border-radius:4px;box-shadow:0 8px 18px rgba(0,11,45,.16)}
}[data-motion=still] .home-page .screen-set[data-current]{animation:none}
[data-motion=still] .home-page .effect i:before,[data-motion=still] .home-page .effect-line line,[data-motion=still] .home-page .effect-window,[data-motion=still] .home-page .effect-screen *{transition:none}
[data-motion=still] .home-page .resident-card,[data-motion=still] .home-page .hour-tag,[data-motion=still] .home-page .slices,[data-motion=still] .home-page .slice-night,[data-motion=still] .home-page .slice-name,[data-motion=still] .home-page .sim-day,[data-motion=still] .home-page .sim-bars i,[data-motion=still] .home-page .resident-chain span{transition:none}
[data-motion=still] .home-page .kind-card{opacity:1;transition:none}
@media(max-width:760px){
 /* On a phone the words of both screens stand at the foot over a wash of
    paper, or navy while the city is numbers, and the city keeps the top. */
 .home-page.one-city .screen.simulation .screen-words,.home-page.one-city .screen.kinds .screen-words{justify-content:flex-end;padding-bottom:calc(10svh + 16px)}
 .home-page .screen.simulation:before,.home-page .screen.kinds:before{background:linear-gradient(180deg,rgba(246,247,251,.92) 0,rgba(246,247,251,0) 110px),linear-gradient(0deg,rgba(246,247,251,.98) 0,rgba(246,247,251,.92) 42%,rgba(246,247,251,0) 64%)}
 .home-page .screen.simulation[data-night]:before{background:linear-gradient(180deg,rgba(0,11,45,.9) 0,rgba(0,11,45,0) 110px),linear-gradient(0deg,rgba(0,11,45,.97) 0,rgba(0,11,45,.92) 42%,rgba(0,11,45,0) 64%)}
 .home-page .screen.simulation h2,.home-page .screen.kinds h2{font-size:clamp(28px,8.4vw,36px)}
 .home-page .screen.simulation .copy{display:none}
 .home-page .sim-rows{margin-top:14px}
 .home-page .sim-rows li{font-size:13px;padding:8px 0;gap:12px}
 /* The resident's card over the city at the top, under the header. */
 .home-page .resident-card{left:16px;right:16px;top:90px;bottom:auto;width:auto;padding:10px 14px 12px}
 .home-page .resident-card p{margin-bottom:8px;font-size:10px}
 .home-page .resident-card dl{grid-template-columns:auto 1fr auto 1fr;gap:4px 10px;font-size:12px}
 .home-page .resident-chain{margin-top:8px;font-size:11px}
 .home-page .resident-chain span{padding:4px 2px}
 .home-page .hour-tag{font-size:12px;padding:3px 6px}
 /* One kind fills the city at a time: the bar names which, and only its
    card shows. */
 .home-page .kind-bar{display:grid;grid-template-columns:repeat(3,1fr);margin-top:14px;border:1px solid #b9c4da;background:rgba(246,247,251,.9);font-size:12px;font-weight:750;text-align:center}
 .home-page .kind-bar span{padding:8px 2px;border-right:1px solid #b9c4da;color:#4a5370;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .3s,color .3s}
 .home-page .kind-bar span:last-child{border-right:0}
 .home-page .kind-bar span[data-current]{background:#000b2d;color:#fff}
 /* The day strip smaller, under the rows. */
 .home-page .sim-day{margin-top:12px}
 .home-page .sim-day>b{font-size:28px}
 .home-page .sim-bars{height:40px;margin-top:8px;gap:2px}
 .home-page .sim-ticks{font-size:10px}
 .home-page .kind-strip{grid-template-columns:1fr;margin-top:8px}
 .home-page .kind-strip:before,.home-page .kind-dot{display:none}
 .home-page .kind-card{display:none;border-right:0;padding:12px 14px 12px;opacity:1}
 .home-page .kind-card[data-current],.home-page .kind-strip:not(:has([data-current])) .kind-card:first-child{display:grid}
 .home-page .kind-card h3{font-size:15px}
 .home-page .kind-ask{font-size:13px;margin-bottom:6px}
 .home-page .kind-draw{height:32px;margin-bottom:8px}
 .home-page .kind-facts{font-size:11px}
 .home-page .kind-facts div{padding:5px 6px}
 .home-page .kind-meters{margin-top:8px}
 .home-page .slices{display:none}
 .home-page .slice-night{top:80px;bottom:52svh}
}

/* The homepage plays its chapters (home-player.js): the page never scrolls,
   and every chapter stands over the city in the same place, above the bar,
   only the open one shown. The words of the one opening come in as the last
   one's fade. A chapter's words taller than their room scroll in their own
   box. */
html:has(body.played){overflow:hidden;overscroll-behavior:none;scroll-behavior:auto}
body.played{--bar-room:52px;height:100svh;overflow:hidden;overscroll-behavior:none}
body.played .screen,body.played .screen.tall{position:fixed;left:0;right:0;top:0;bottom:var(--bar-room);min-height:0;opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
body.played .screen[data-on]{opacity:1;visibility:visible;transition:opacity .45s ease .2s,visibility 0s}
body.played .screen-words,body.played .screen.tall .screen-words{position:relative;top:auto;height:100%;min-height:0}
body.played .screen.tall:before{position:absolute;inset:0;height:auto;margin:0}
body.played .screen.ai{-webkit-mask-image:none;mask-image:none}
body.played .screen.closing .closing-copy{padding-bottom:28px}
/* A step: a row of a chapter's list a press plays from. The one playing has
   its rule fill as it plays. */
.played [data-step]{position:relative;cursor:pointer}
.played [data-step]:focus-visible{outline:2px solid #57039b;outline-offset:3px}
.played .asks li[data-step][data-playing],.played .sim-rows li[data-step][data-playing],.played .three>div[data-step][data-playing]{border-top-color:#b9c4da}
.played .asks li[data-step]:after,.played .sim-rows li[data-step]:after,.played .three>div[data-step]:after,.played .kind-card[data-step]:after{content:'';position:absolute;left:0;top:-2px;height:2px;width:0;background:#000b2d}
.played .asks li[data-step][data-playing]:after,.played .sim-rows li[data-step][data-playing]:after,.played .three>div[data-step][data-playing]:after{width:calc(var(--step-fill,1)*100%)}
.played .kind-card[data-step]:after{top:0;height:4px;background:var(--kind)}
.played .kind-card[data-step][data-playing]{box-shadow:none}
.played .kind-card[data-step][data-playing]:after{width:calc(var(--step-fill,1)*100%)}
.played .screen.simulation[data-night] li[data-step]:after{background:#fff}
.played .kind-bar span[data-step]{pointer-events:auto}

/* The one bar (home-chapters.js), a strip along the foot of the screen like
   the site's menu: Back, pause and play, and Next as bare icons, then the nine
   chapters by name, each underlined by a line that fills with --fill. No box,
   corners or shadow: a hairline above and the page's own paper. */
.chapters{position:fixed;left:0;right:0;bottom:0;z-index:6}
.chapter-bar{position:relative;display:flex;align-items:stretch;min-height:52px;padding:0 48px 0 40px;border-top:1px solid #d5dcec;background:#f6f7fbf2}
.chapter-back,.chapter-next,.chapter-play{align-self:center;flex:none;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;background:none;color:#000b2d;cursor:pointer}
.chapter-back{order:1;color:#52607d}
.chapter-play{order:2}
.chapter-next{order:3;margin-right:18px}
.chapter-back svg,.chapter-next svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
.chapter-back:hover,.chapter-next:hover,.chapter-play:hover{color:#57039b}
.chapter-back:disabled,.chapter-next:disabled{opacity:.3;cursor:default;color:#52607d}
.chapter-back:focus-visible,.chapter-next:focus-visible,.chapter-play:focus-visible,.chapter-now:focus-visible,.chapter-menu a:focus-visible{outline:2px solid #57039b;outline-offset:-2px}
.chapter-play svg{grid-area:1/1;width:12px;height:12px}
.chapter-pause-mark{fill:none;stroke:currentColor;stroke-width:2.4}
.chapter-play-mark{fill:currentColor;display:none}
.chapter-play:not([data-playing]) .chapter-pause-mark{display:none}
.chapter-play:not([data-playing]) .chapter-play-mark{display:block}
/* The names. One is cut with an ellipsis before the strip runs out of room;
   the open one never is. */
.chapter-menu{order:4;flex:1;min-width:0;display:flex;justify-content:space-between;gap:22px;margin:0;padding:0;list-style:none}
.chapter-menu li{display:flex;min-width:0}
.chapter-menu li:has([aria-current]){flex:none}
.chapter-menu a{display:flex;flex-wrap:wrap;align-content:center;align-items:baseline;gap:7px 0;min-width:0;padding-top:3px;font-size:12px;font-weight:600;color:#8a95b2;text-decoration:none;white-space:nowrap}
.chapter-menu a span{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.chapter-menu a b{display:none;flex:none;margin-right:6px;font-size:.9em;font-weight:700;letter-spacing:.08em}
.chapter-menu a:after{content:'';display:block;flex-basis:100%;height:3px;border-radius:2px}
.chapter-menu a:hover{color:#000b2d}
.chapter-menu a[data-read]{color:#000b2d}
.chapter-menu a[aria-current]{font-weight:800;color:#000b2d}
.chapter-menu a[aria-current] b{display:inline}
/* Every number shows where the nine fit with room to spare. */
@media(min-width:1400px){.chapter-menu a b{display:inline}}
/* Each chapter's line is its slice of the logo's colour band, cyan to yellow,
   the way the Blindsided site lights its logo's bars as its story is read:
   faint still to come, filling with the open chapter's clock, whole once
   played. Played through, the nine lines make up the band. */
.chapter-menu li:nth-child(1) a,.chapter-line i:nth-child(1){--s1:#0ad6ed;--s2:#07bae2}
.chapter-menu li:nth-child(2) a,.chapter-line i:nth-child(2){--s1:#07bae2;--s2:#049fd7}
.chapter-menu li:nth-child(3) a,.chapter-line i:nth-child(3){--s1:#049fd7;--s2:#0257a3}
.chapter-menu li:nth-child(4) a,.chapter-line i:nth-child(4){--s1:#0257a3;--s2:#081476}
.chapter-menu li:nth-child(5) a,.chapter-line i:nth-child(5){--s1:#081476;--s2:#3a098d}
.chapter-menu li:nth-child(6) a,.chapter-line i:nth-child(6){--s1:#3a098d;--s2:#740991}
.chapter-menu li:nth-child(7) a,.chapter-line i:nth-child(7){--s1:#740991;--s2:#b91c6e}
.chapter-menu li:nth-child(8) a,.chapter-line i:nth-child(8){--s1:#b91c6e;--s2:#fc4b09}
.chapter-menu li:nth-child(9) a,.chapter-line i:nth-child(9){--s1:#fc4b09;--s2:#febe11}
.chapter-menu a:after,.chapter-line i{--lit:linear-gradient(90deg,var(--s1),var(--s2));background:var(--lit) 0 0/calc(var(--fill,0)*100%) 100% no-repeat,linear-gradient(90deg,color-mix(in srgb,var(--s1) 22%,transparent),color-mix(in srgb,var(--s2) 22%,transparent))}
.chapter-menu a[data-read]:after,.chapter-line i[data-read]{background:var(--lit)}
/* Where the nine names do not fit: the open chapter's name over a line of
   nine parts, shown below 900 pixels. */
.chapter-where{order:5;display:none;flex:1;min-width:0;flex-direction:column;justify-content:center;padding:4px 8px 0 4px}
.chapter-top{display:flex;align-items:center;gap:8px;min-width:0}
.chapter-now{display:flex;align-items:center;gap:8px;flex:0 1 auto;min-width:0;min-height:24px;padding:0;border:0;background:none;font:750 13px Manrope,Arial,sans-serif;color:#000b2d;cursor:pointer;text-align:left}
.chapter-now span{display:none;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chapter-now span[data-current]{display:block}
.chapter-now b{margin-right:7px;font-size:.9em;letter-spacing:.08em}
.chapter-chevron{width:12px;height:12px;flex:none;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
.chapters[data-open] .chapter-chevron{transform:rotate(180deg)}
.chapter-line{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px;padding:7px 0 10px;cursor:pointer;touch-action:none}
.chapter-line i{display:block;height:3px;border-radius:2px}
.chapter-line i[data-over]{box-shadow:0 0 0 2px #57039b}
/* The preview over the line: the chapter's still, its number and name, and
   its heading, with a point at the part it shows. */
.chapter-peek{position:absolute;bottom:calc(100% + 10px);left:var(--left,0);width:260px;padding:8px;background:#fff;border:1px solid #d5dcec;box-shadow:0 16px 35px #000b2d24;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s,visibility .15s}
.chapter-peek[data-shown]{opacity:1;visibility:visible}
.chapter-peek:before{content:'';position:absolute;bottom:-6px;left:calc(var(--point,20px) - 6px);width:10px;height:10px;background:#fff;border-right:1px solid #d5dcec;border-bottom:1px solid #d5dcec;transform:rotate(45deg)}
.chapter-peek img,.chapter-tile img{display:block;width:100%;height:auto;aspect-ratio:8/5;background:#eef2f9}
.chapter-eyebrow{display:block;margin-top:8px;font-size:10px;font-weight:700;letter-spacing:.12em;color:#52607d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chapter-peek .chapter-eyebrow{color:#57039b}
.chapter-heading{display:block;margin-top:3px;font-size:15px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:#000b2d}
/* The index: ten tiles in two rows standing on the bar, the one open outlined
   in violet with its fill, and the ones played with a navy number. */
.chapter-tiles{position:fixed;left:0;right:0;bottom:var(--above,92px);max-height:calc(100svh - var(--above,92px) - 72px);overflow:auto;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:16px 48px 20px;background:#f6f7fb;border-top:1px solid #d5dcec;border-bottom:1px solid #d5dcec;box-shadow:0 -16px 35px #000b2d1f}
.chapter-tiles[hidden]{display:none}
.chapter-tile{display:flex;flex-direction:column;min-width:0;padding:8px;background:#fff;border:1px solid #d5dcec;color:#000b2d;text-decoration:none}
.chapter-tile:hover{border-color:#a2adc8}
.chapter-words{display:block;min-width:0}
.chapter-tile .chapter-heading{font-size:14px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.chapter-tile[data-read] .chapter-eyebrow{color:#000b2d}
.chapter-tile[data-current]{padding:7px;border:2px solid #57039b}
.chapter-tile[data-current] .chapter-eyebrow{color:#57039b}
.chapter-fill{display:none;height:3px;margin-top:8px;background:linear-gradient(90deg,#57039b calc(var(--fill,0)*100%),#d5dcec 0)}
.chapter-tile[data-current] .chapter-fill{display:block}
.chapter-end{background:#000b2d;border-color:#000b2d}
.chapter-end:hover{border-color:#0ad6ed}
.chapter-end .chapter-eyebrow{color:#0ad6ed;text-transform:uppercase}
.chapter-end .chapter-heading{color:#fff}
/* Over the navy end the strip turns navy and takes the header's white ink. */
.one-city[data-stage-ink=light] .chapter-bar{background:#000b2df2;border-color:#ffffff26}
.one-city[data-stage-ink=light] .chapter-now{color:#fff}
/* Over navy the slices are lightened, so the band's navy middle shows. */
.one-city[data-stage-ink=light] .chapter-line i,.one-city[data-stage-ink=light] .chapter-menu a:after{--lit:linear-gradient(90deg,color-mix(in srgb,var(--s1),#fff 40%),color-mix(in srgb,var(--s2),#fff 40%));background:var(--lit) 0 0/calc(var(--fill,0)*100%) 100% no-repeat,linear-gradient(90deg,color-mix(in srgb,var(--s1) 30%,#ffffff1f),color-mix(in srgb,var(--s2) 30%,#ffffff1f))}
.one-city[data-stage-ink=light] .chapter-line i[data-read],.one-city[data-stage-ink=light] .chapter-menu a[data-read]:after{background:var(--lit)}
.one-city[data-stage-ink=light] .chapter-menu a{color:#9fb0d6}
.one-city[data-stage-ink=light] .chapter-menu a[data-read],.one-city[data-stage-ink=light] .chapter-menu a[aria-current],.one-city[data-stage-ink=light] .chapter-menu a:hover{color:#fff}
.one-city[data-stage-ink=light] .chapter-back,.one-city[data-stage-ink=light] .chapter-next,.one-city[data-stage-ink=light] .chapter-play{color:#fff}
.one-city[data-stage-ink=light] .chapter-back:hover,.one-city[data-stage-ink=light] .chapter-next:hover,.one-city[data-stage-ink=light] .chapter-play:hover{color:#0ad6ed}
/* A jump between chapters goes through paper. */
.chapter-veil{position:fixed;inset:0;z-index:4;background:#f6f7fb;opacity:0;pointer-events:none;transition:opacity .18s ease}
.chapter-veil[data-shown]{opacity:1}
@media(max-width:1199px){
 .chapter-tiles{padding:14px 36px 18px;grid-template-columns:repeat(4,minmax(0,1fr))}
 .chapter-bar{padding:0 32px 0 26px}
 .chapter-menu{gap:16px}
}
/* Below 900 pixels the nine names give way to the open chapter's name over
   the line of nine: pause at the left, Back and Next at the right. */
@media(max-width:900px){
 .chapter-tiles{padding:12px 24px 16px;grid-template-columns:repeat(3,minmax(0,1fr))}
 body.played{--bar-room:56px}
 .chapter-bar{min-height:56px;padding:0 10px}
 .chapter-menu{display:none}
 .chapter-where{display:flex}
 .chapter-play{order:1;width:40px;height:40px}
 .chapter-back{order:6;width:40px;height:40px}
 .chapter-next{order:7;width:40px;height:40px;margin-right:0}
}
/* On a phone the line takes a finger, and the index is one chapter a row
   with its still beside it. */
@media(max-width:620px){
 .chapter-peek{width:min(260px,calc(100vw - 16px))}
 .chapter-tiles{display:block;padding:0 20px 16px;border-top:0}
 .chapter-tile{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;align-items:center;padding:8px 10px;border-width:0 1px 1px}
 .chapter-tile:first-child{border-top-width:1px}
 .chapter-tile[data-current]{padding:8px 10px;border-width:0 1px 1px;border-color:#d5dcec;background:#f3eefb;box-shadow:inset 3px 0 0 #57039b}
 .chapter-tile .chapter-eyebrow{margin-top:0;font-size:9px}
 .chapter-tile .chapter-heading{font-size:14px;-webkit-line-clamp:2}
 .chapter-tile[data-current] .chapter-fill{margin-top:6px}
}
@media(max-width:360px){
 .chapter-bar{padding:0 4px}
 .chapter-tiles{padding:0 12px 16px}
}