/* How a layer works: one centred column, a figure between two hairlines for each idea. */

html{scroll-padding-top:74px}
.guide-head{padding:clamp(40px,6vw,76px) 24px 0}

/* ---------- the index: nine numbers that stay at the top ---------- */
.steps{position:sticky;top:0;z-index:6;display:flex;justify-content:center;gap:clamp(2px,1.2vw,14px);margin-top:clamp(28px,4vw,44px);padding:10px 12px;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:rgba(1,6,26,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.steps a{display:grid;place-items:center;width:36px;height:36px;border-radius:4.5px;font-size:15px;font-variant-numeric:tabular-nums;color:rgba(226,233,255,.62);transition:color .2s,background-color .2s}
.steps a:hover{color:#fff}
.steps a.is-read{color:rgba(226,233,255,.9)}
.steps a.is-active{background:#fff;color:#0a0a0a;font-weight:500}

/* ---------- parts ---------- */
.guide{position:relative;z-index:1;width:min(860px, 100% - 40px);margin:0 auto;padding-bottom:clamp(30px,5vw,60px)}
.part{padding:clamp(56px,8vw,104px) 0 0;text-align:center}
.part-n{margin:0;font-size:15px;line-height:1;color:var(--link);font-variant-numeric:tabular-nums}
.part-n::after{content:" of 9"}
.part h2{margin:16px auto 0;max-width:16em;font-weight:400;font-size:clamp(32px,4.6vw,52px);line-height:1.04;letter-spacing:-.028em;text-wrap:balance}
.part-text{width:min(600px,100%);margin:clamp(20px,3vw,30px) auto 0;text-align:left}
.part-text p{margin:0;font-size:18px;line-height:1.6;color:rgba(238,242,255,.88)}
.part-text p + p{margin-top:16px}
.part-text ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--hairline)}
.part-text li{padding:15px 0 14px;border-bottom:1px solid var(--hairline);font-size:17px;line-height:1.55;color:rgba(226,233,255,.8)}
.part-text li b{font-weight:500;color:#fff}

.part-fig{margin:clamp(28px,4vw,44px) 0 0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.fig-scroll{overflow-x:auto;scrollbar-width:none}
.fig-scroll::-webkit-scrollbar{display:none}
svg.fig{display:block;width:100%;min-width:680px;height:auto;margin:10px 0}
.part-fig figcaption{padding:14px 12px 15px;border-top:1px solid var(--hairline);font-size:15px;line-height:1.45;color:rgba(226,233,255,.66)}

.fig text{font-family:"Google Sans",ui-sans-serif,system-ui,sans-serif;font-size:16px;letter-spacing:-.01em}
.fig .t{fill:#fff}
.fig .d{fill:rgba(226,233,255,.74)}
.fig .n{fill:#fff;font-size:30px;letter-spacing:-.03em}
.fig .ln{fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.fig .ln.thin{stroke:rgba(255,255,255,.22);stroke-width:1}
.fig .box{fill:none;stroke:rgba(255,255,255,.5);stroke-width:1}
.fig .price{fill:none;stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 0 5px rgba(160,220,255,.8))}
.fig .row{fill:none;stroke:var(--dash);filter:drop-shadow(0 0 4px rgba(40,150,255,.8))}
.fig .row.near{stroke:#eaf8ff;filter:drop-shadow(0 0 5px rgba(140,215,255,.9))}
.fig .row.far{stroke:var(--dash-far)}
.fig .row.gone{stroke:rgba(160,185,230,.26);filter:none}
.fig .tile{fill:var(--dash)}
.fig .tile.gone{fill:rgba(160,185,230,.18)}
.fig .mosaic-fig{filter:drop-shadow(0 0 4px rgba(40,150,255,.7))}

/* ---------- a few words, and the way on ---------- */
.words dl{width:min(600px,100%);margin:clamp(22px,3vw,32px) auto 0;border-top:1px solid var(--hairline);text-align:left}
.words dl div{display:grid;grid-template-columns:130px minmax(0,1fr);gap:20px;padding:14px 0 13px;border-bottom:1px solid var(--hairline);font-size:17px;line-height:1.5}
.words dt{font-weight:500;color:#fff}
.words dd{margin:0;color:rgba(226,233,255,.8)}
.page-cta{display:flex;flex-direction:column;align-items:center;margin-top:clamp(34px,5vw,56px)}
.page-cta .button{margin-top:0}
.page-cta .discover svg{width:.85em;height:.68em}
.closing--guide{margin-top:clamp(10px,3vw,40px);background:transparent}
.closing--guide::before{content:"";position:absolute;left:0;right:0;top:0;z-index:1;height:44%;background:linear-gradient(to bottom, var(--navy) 0, rgba(1,6,26,0) 100%);pointer-events:none}

@media (max-width:599.98px){
  .steps a{width:30px;height:34px;font-size:14px}
  .guide{width:calc(100% - 32px)}
  .part-fig{margin-left:-16px;margin-right:-16px}
  svg.fig{min-width:640px}
  .words dl div{grid-template-columns:minmax(0,1fr);gap:2px}
  .part-text p{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .steps a{transition:none}
}