/* HUMANATE, ONE SYSTEM: styles for the second set of components (see parts2.js). Colours come from the pathway tokens
   (--a, --b, --c, --hi), so Venture Studio stays blue and white and the Exchange stays sandy gold. No glow, hairlines only. */

/* MATCH */
.p-match{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,300px);gap:clamp(28px,5vw,90px);align-items:center;width:100%;margin-top:clamp(18px,4svh,44px)}
.p-match .ml{display:flex;flex-direction:column}
.p-match .mi{position:relative;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:baseline;width:100%;padding:clamp(11px,1.9svh,18px) 0;text-align:left;border-top:.5px solid rgba(var(--b),.14);color:inherit;transition:opacity .4s var(--ease)}
.p-match .mi:last-child{border-bottom:.5px solid rgba(var(--b),.14)}
.p-match .mi .tk{grid-row:1/3;align-self:center;display:grid;place-items:center;width:20px;height:20px;box-shadow:inset 0 0 0 .5px rgba(var(--b),.4);color:#06070c;transition:background-color .35s var(--ease),box-shadow .35s var(--ease)}
.p-match .mi .tk svg{width:13px;height:13px;opacity:0;scale:.5;transition:opacity .3s var(--ease),scale .4s var(--ease)}
.p-match .mi b{font-family:var(--title);font-weight:200;font-size:clamp(20px,min(2vw,3.6svh),30px);line-height:1.1;letter-spacing:-.02em;color:rgba(255,255,255,.42);background:linear-gradient(90deg,#fff,var(--hi)) no-repeat 0 0/0% 100%;-webkit-background-clip:text;background-clip:text;transition:color .45s var(--ease),background-size .7s var(--ease)}
.p-match .mi span{grid-column:2;margin-top:4px;font-size:14px;color:var(--faint);transition:color .4s var(--ease)}
.p-match .mi:hover b,.p-match .mi:focus-visible b{color:rgba(255,255,255,.78)}
.p-match .mi:focus-visible{outline:0} .p-match .mi:focus-visible .tk{box-shadow:inset 0 0 0 1px var(--hi)}
.p-match .mi.sel b{color:transparent;background-size:100% 100%}
.p-match .mi.sel span{color:var(--mute)}
.p-match .mi.sel .tk{background-color:var(--hi);box-shadow:none} .p-match .mi.sel .tk svg{opacity:1;scale:1}
.p-match .sd{display:flex;flex-direction:column;align-items:flex-start}
.p-match .num{display:flex;align-items:baseline;gap:10px;font-family:var(--title);font-weight:200;line-height:.9;letter-spacing:-.04em;overflow:hidden}
.p-match .num b{font-weight:200;font-size:clamp(84px,min(11vw,19svh),164px);color:rgba(255,255,255,.3);transition:color .5s var(--ease)}
.p-match.any .num b{color:#fff}
.p-match .num i{font-style:normal;font-size:clamp(20px,2vw,28px);letter-spacing:0;color:var(--faint)}
.p-match .bar2{display:block;width:100%;height:1px;margin-top:14px;background:rgba(var(--b),.18)}
.p-match .bar2 u{display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--hi);transition:width .7s var(--ease)}
.p-match .vd{margin-top:14px;min-height:1.5em;font-size:15px;color:var(--mute)}
.p-match.full .vd{color:var(--hi)}
@media (max-width:900px){
  .p-match{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:4px}
  .p-match .sd{order:-1;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
  .p-match .num b{font-size:44px} .p-match .num i{font-size:16px} .p-match .bar2{order:3;margin-top:6px} .p-match .vd{margin-top:0;font-size:14px}
  .p-match .mi{grid-template-columns:30px minmax(0,1fr);padding:11px 0} .p-match .mi b{font-size:19px} .p-match .mi span{font-size:13px}
}

/* DUO */
.p-duo{width:100%;margin-top:clamp(18px,4svh,44px)}
.p-duo .sw{position:relative;display:inline-flex;padding:4px;box-shadow:inset 0 0 0 .5px rgba(var(--b),.3)}
.p-duo .sw .th{position:absolute;left:0;top:4px;bottom:4px;width:0;background:linear-gradient(180deg,#fff,var(--hi));transition:translate .6s var(--ease),width .6s var(--ease)}
.p-duo .sw button{position:relative;z-index:1;padding:11px 22px;font-size:15px;letter-spacing:0;color:var(--mute);transition:color .4s var(--ease)}
.p-duo .sw button.sel{color:#06070c}
.p-duo .sw button:focus-visible{outline:1px solid var(--hi);outline-offset:3px}
.p-duo .bd{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:start;margin-top:clamp(22px,4.4svh,48px);min-height:clamp(200px,30svh,280px)}
.p-duo .st{font-family:var(--title);font-weight:200;font-size:clamp(26px,min(3vw,5.2svh),44px);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.p-duo .st em{font-style:normal;background:linear-gradient(90deg,var(--c),var(--hi));-webkit-background-clip:text;background-clip:text;color:transparent}
.p-duo ol{list-style:none;margin:0;padding:0}
.p-duo li{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:baseline;padding:clamp(11px,1.8svh,16px) 0;border-top:.5px solid rgba(var(--b),.14)}
.p-duo li:last-child{border-bottom:.5px solid rgba(var(--b),.14)}
.p-duo li em{grid-row:1/3;font-style:normal;font-size:11px;letter-spacing:.14em;color:var(--faint)}
.p-duo li b{font-weight:400;font-size:16px;color:var(--paper)}
.p-duo li span{grid-column:2;margin-top:2px;font-size:14px;color:var(--mute)}
@media (max-width:900px){ .p-duo{margin-top:4px} .p-duo .bd{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:18px;min-height:0} .p-duo .st{font-size:24px} .p-duo .sw button{padding:10px 16px;font-size:14px} }

/* NET */
.p-net{position:relative;width:100%;height:clamp(250px,42svh,380px);margin-top:clamp(10px,2.4svh,28px)}
.p-net svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.p-net svg path{fill:none;stroke:rgba(var(--b),.34);stroke-width:.75;transition:stroke-dashoffset 1.3s var(--ease),stroke .4s var(--ease)}
.p-net svg path.on{stroke:var(--hi)}
.p-net svg circle{fill:var(--hi);opacity:0}
.p-net .hub{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:210px;padding:22px 30px;text-align:center}
.p-net .hub b{font-family:var(--title);font-weight:200;font-size:clamp(22px,2vw,30px);letter-spacing:-.02em;white-space:nowrap}
.p-net .hub span{font-size:13px;color:var(--mute)}
.p-net .nd{position:absolute;translate:0 -50%;display:flex;align-items:center;gap:12px;color:inherit;white-space:nowrap;transition:opacity .4s var(--ease)}
.p-net .nd.l{flex-direction:row-reverse;text-align:right}
.p-net .nd i{flex:none;width:9px;height:9px;rotate:45deg;background:rgb(var(--ground));box-shadow:inset 0 0 0 1px rgba(var(--b),.7);transition:background-color .35s var(--ease)}
.p-net .nd b{font-weight:400;font-size:clamp(15px,1.25vw,18px);color:rgba(255,255,255,.86);transition:color .35s var(--ease)}
.p-net .nd span{display:none}
.p-net .nd.on i{background:var(--hi)} .p-net .nd.on b{color:#fff}
.p-net .nd:focus-visible{outline:0} .p-net .nd:focus-visible i{box-shadow:inset 0 0 0 1px #fff}
.p-net.lit .nd:not(.on){opacity:.45}
.p-net + .cap{min-height:1.5em;margin-top:clamp(8px,1.6svh,16px);text-align:center;font-size:15px;color:var(--mute)}
.p-net.m{height:auto;display:flex;flex-direction:column;gap:0}
.p-net.m svg{display:none}
.p-net.m .hub{position:relative;left:auto;top:auto;translate:none;align-items:flex-start;text-align:left;min-width:0;padding:16px 18px;margin-bottom:6px}
.p-net.m .nd,.p-net.m .nd.l{position:static;translate:none;flex-direction:row;flex-wrap:wrap;text-align:left;white-space:normal;gap:2px 12px;padding:11px 0;border-top:.5px solid rgba(var(--b),.14)}
.p-net.m .nd span{display:block;flex-basis:100%;padding-left:21px;font-size:13px;color:var(--mute)}
.p-net.m + .cap{display:none}

/* EGG */
.p-egg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,5vw,90px);align-items:stretch;width:100%;max-width:1040px;margin-top:clamp(10px,2.6svh,30px)}
.p-egg .fig{height:clamp(240px,44svh,400px);aspect-ratio:300/380}
.p-egg svg{display:block;width:100%;height:100%;overflow:visible}
.p-egg .ol{fill:none;stroke:var(--hi);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke-dashoffset 1.6s var(--ease)}
.p-egg .dv{stroke:rgba(var(--b),.4);stroke-width:.6;vector-effect:non-scaling-stroke}
.p-egg .band{fill:rgba(var(--a),0);cursor:default;transition:fill .6s var(--ease)}
.p-egg .band.on{fill:rgba(var(--a),.38)}
.p-egg .rows{display:flex;flex-direction:column;padding:5.3% 0}
.p-egg .ph2{position:relative;flex:1;display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-content:center;align-items:baseline;column-gap:8px;text-align:left;color:inherit;border-top:.5px solid rgba(var(--b),.14);opacity:.5;transition:opacity .45s var(--ease)}
.p-egg .ph2:last-child{border-bottom:.5px solid rgba(var(--b),.14)}
.p-egg .ph2::before{content:"";position:absolute;left:calc(clamp(28px,5vw,90px) * -1);top:50%;width:clamp(20px,4vw,74px);height:.5px;background:rgba(var(--b),.3);transition:background-color .4s var(--ease)}
.p-egg .ph2 em{grid-row:1/3;font-style:normal;font-size:11px;letter-spacing:.14em;color:var(--faint)}
.p-egg .ph2 b{font-family:var(--title);font-weight:200;font-size:clamp(22px,min(2.2vw,4svh),32px);line-height:1.08;letter-spacing:-.02em}
.p-egg .ph2 span{grid-column:2;margin-top:5px;font-size:14.5px;color:var(--mute)}
.p-egg .ph2 .here{grid-column:3;grid-row:1/3;align-self:center;font-style:normal;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:7px 10px;color:var(--hi);box-shadow:inset 0 0 0 .5px rgba(var(--b),.5);white-space:nowrap}
.p-egg .ph2.on{opacity:1} .p-egg .ph2.on::before{background:var(--hi)}
.p-egg .ph2:focus-visible{outline:0;opacity:1}
.p-egg-note{margin-top:clamp(10px,2svh,20px);font-size:14px;color:var(--mute)}
@media (max-width:900px){
  .p-egg{grid-template-columns:96px minmax(0,1fr);gap:18px;margin-top:2px}
  .p-egg .fig{height:auto;align-self:center} .p-egg .rows{padding:0}
  .p-egg .ph2{grid-template-columns:minmax(0,1fr);padding:11px 0} .p-egg .ph2::before,.p-egg .ph2 em{display:none}
  .p-egg .ph2 b{font-size:19px} .p-egg .ph2 span{grid-column:1;font-size:13px} .p-egg .ph2 .here{grid-column:1;grid-row:auto;justify-self:start;margin-top:7px;padding:5px 8px;font-size:9.5px}
}
@media (prefers-reduced-motion:reduce){ .p-match *,.p-duo *,.p-net *,.p-egg *{transition:none!important} }
.p-match .mi .tk svg{width:15px;height:15px} .p-match .mi.sel .tk svg{scale:1.15}

/* MOSAIC (2026-10-19): a treemap of tiles that flip to their description. Three stacked on the left, tall and short on the right. */
.p-mosaic{display:grid;width:100%;max-width:1280px;margin:clamp(14px,3svh,32px) 0 0;height:clamp(360px,calc(100svh - 400px),560px);gap:clamp(8px,.9vw,14px);
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:1.15fr 1fr .9fr;grid-template-areas:"a c" "b c" "e d"}
.p-mosaic .t0{grid-area:a}.p-mosaic .t1{grid-area:b}.p-mosaic .t2{grid-area:c}.p-mosaic .t3{grid-area:d}.p-mosaic .t4{grid-area:e}
.mo{position:relative;min-height:0;perspective:1400px;cursor:pointer;outline:0}
.mo .fl{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.16,1,.3,1)}
.mo.on .fl{transform:rotateX(180deg)}
.mo .fa,.mo .fb{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:rgb(var(--ground))}
.mo .fb{transform:rotateX(180deg);justify-content:center;background:linear-gradient(150deg,rgba(var(--a),.2),rgba(var(--a),.06) 60%,rgba(var(--ground),.9)),rgb(var(--ground));box-shadow:inset 0 0 0 .5px rgba(var(--b),.55)}
.mo .art{position:absolute;inset:0;overflow:hidden}
.mo .art img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(var(--mo-sepia,.45)) contrast(1.08) brightness(.6);transition:scale 1.2s cubic-bezier(.16,1,.3,1)}
/* a colour blend does not survive inside a 3D flip, so the photograph is toned by filter (sepia reads as the Exchange gold) */
.mo .art::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 30%,rgba(var(--ground),.82))}
.mo:hover .art img{scale:1.04}
.mo .tx{position:relative;z-index:3;display:block;padding:clamp(16px,1.6vw,26px)}
.mo .ms{display:block;margin-bottom:10px;font-size:24px}
.mo b{display:block;font-family:var(--title);font-weight:200;font-size:clamp(20px,min(1.9vw,3.4svh),30px);line-height:1.08;letter-spacing:-.02em}
.mo .fb b{font-size:clamp(17px,min(1.4vw,2.6svh),22px);color:var(--c)}
.mo .fb span{display:block;margin-top:10px;font-size:clamp(15px,1.15vw,17px);line-height:1.45;color:var(--paper)}
.mo .fb em{display:block;margin-top:8px;font-style:normal;font-size:14px;line-height:1.5;color:var(--mute);max-width:46ch}
.mo:focus-visible .fa,.mo:focus-visible .fb{box-shadow:inset 0 0 0 1px rgba(var(--b),.9)}
@media (max-width:760px){
  .p-mosaic{height:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:none;grid-auto-rows:150px;grid-template-areas:"a a" "b c" "e c" "d d"}
}
@media (prefers-reduced-motion:reduce){ .mo .fl{transition:none} .mo .fb{transform:none;opacity:0;transition:opacity .2s} .mo.on .fl{transform:none} .mo.on .fb{opacity:1} .mo .fa{-webkit-backface-visibility:visible;backface-visibility:visible} }

/* ---------- THE EXCHANGE LANDING PAGE, further sections (2026-10-19; components in parts2.js) ---------- */
.p-figs,.p-scan,.p-course,.p-routes,.p-faq,.p-close{justify-self:stretch;align-self:start;width:100%}

/* FIGURES: four figures on one hairline, each counting up as it arrives */
.p-figs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(10px,2.4svh,26px) 0 0;box-shadow:inset 0 .5px 0 rgba(var(--b),.22)}
.p-figs .fg{position:relative;padding:clamp(22px,3.4svh,34px) clamp(14px,2vw,30px) 0 0}
.p-figs .fg+.fg{padding-left:clamp(14px,2vw,30px);box-shadow:inset .5px 0 0 rgba(var(--b),.14)}
.p-figs .fg::before{content:"";position:absolute;left:0;top:-.5px;height:1px;width:0;background:var(--c);transition:width 1.4s var(--ease)}
.p-figs.in .fg::before{width:42%}
.p-figs .fg:nth-child(2)::before{transition-delay:.12s}.p-figs .fg:nth-child(3)::before{transition-delay:.24s}.p-figs .fg:nth-child(4)::before{transition-delay:.36s}
.p-figs dt{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.p-figs dd{margin:0}
.p-figs .n{display:block;margin:14px 0 12px;font-family:var(--title);font-weight:200;font-size:clamp(46px,min(5.4vw,9svh),88px);line-height:.95;letter-spacing:-.04em;color:var(--hi);font-variant-numeric:tabular-nums}
.p-figs dd span{display:block;max-width:26ch;font-size:15px;line-height:1.5;color:var(--mute)}
@media (max-width:900px){ .p-figs{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px} .p-figs .fg:nth-child(3){padding-left:0;box-shadow:none} .p-figs .n{font-size:46px} }

/* SCAN: the checks on the left tick as you scroll; the listing on the right fills its meters and goes live */
.p-scan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,96px);align-items:center;margin-top:clamp(10px,2.4svh,28px)}
.p-scan .crit{list-style:none;margin:0;padding:0;display:grid}
.p-scan .crit li{display:grid;grid-template-columns:30px 1fr;column-gap:16px;row-gap:6px;padding:clamp(16px,2.6svh,24px) 0;box-shadow:inset 0 -.5px 0 rgba(var(--b),.14);opacity:.42;transition:opacity .6s var(--ease)}
.p-scan .crit li.on{opacity:1}
.p-scan .crit li.hi{opacity:1}
.p-scan .tk{grid-row:span 2;display:grid;place-items:center;width:26px;height:26px;margin-top:2px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(var(--b),.4);color:transparent;transition:background-color .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease)}
.p-scan .tk svg{width:14px;height:14px}
.p-scan .crit li.on .tk{background:var(--c);color:rgb(var(--ground));box-shadow:none}
.p-scan .crit b{font-family:var(--title);font-weight:200;font-size:clamp(21px,min(1.9vw,3.4svh),30px);line-height:1.1;letter-spacing:-.015em}
.p-scan .crit span{font-size:15px;line-height:1.5;color:var(--mute)}
.p-scan .card{position:relative;margin:0;padding:clamp(22px,2.4vw,36px);background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:inset 0 0 0 .5px rgba(var(--b),.24),0 40px 90px -50px #000;transition:box-shadow .9s var(--ease)}
.p-scan.live .card{box-shadow:inset 0 0 0 .5px rgba(var(--b),.7),0 0 70px -30px rgba(var(--a),.55),0 40px 90px -50px #000}
.p-scan header{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.p-scan header small{margin-left:auto;font-size:11px;letter-spacing:.14em}
.p-scan .dot{width:7px;height:7px;border-radius:50%;background:rgba(var(--b),.35);transition:background-color .5s}
.p-scan:not(.live) .dot{animation:scDot 1.4s ease-in-out infinite}
.p-scan.live .dot{background:#9fe0b0;box-shadow:0 0 10px rgba(159,224,176,.8)}
.p-scan.live .st{color:var(--hi)}
.p-scan .code{margin:clamp(22px,4svh,40px) 0 10px;font-family:var(--title);font-weight:200;font-size:clamp(40px,min(4.6vw,8svh),76px);line-height:1;letter-spacing:.02em;color:var(--hi)}
.p-scan .nm{display:flex;align-items:center;gap:6px;margin:0 0 clamp(20px,3.4svh,32px);font-size:13px;color:var(--faint)}
.p-scan .nm i{width:34px;height:8px;border-radius:2px;background:rgba(var(--b),.14)} .p-scan .nm i:nth-child(2){width:58px} .p-scan .nm i:nth-child(3){width:22px}
.p-scan .nm span{margin-left:8px}
.p-scan .meter{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.p-scan .meter li{display:grid;grid-template-columns:minmax(0,9ch) 1fr 6ch;align-items:center;gap:14px;font-size:13px;color:var(--mute);transition:color .4s}
.p-scan .meter li.hi{color:var(--paper)}
.p-scan .meter i{position:relative;height:2px;background:rgba(var(--b),.12);overflow:hidden}
.p-scan .meter u{position:absolute;inset:0;background:var(--c);transform:scaleX(0);transform-origin:0 50%;transition:transform 1s var(--ease)}
.p-scan .meter li.on u{transform:scaleX(1)}
.p-scan .meter em{font-style:normal;font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-align:right;opacity:0;transition:opacity .5s var(--ease) .5s;color:var(--c)}
.p-scan .meter li.on em{opacity:1}
.p-scan footer{margin-top:clamp(20px,3.4svh,32px);padding-top:16px;font-size:12.5px;line-height:1.5;color:var(--faint);box-shadow:inset 0 .5px 0 rgba(var(--b),.14)}
@keyframes scDot{50%{background:var(--c)}}
@media (max-width:900px){ .p-scan{grid-template-columns:minmax(0,1fr);gap:26px} .p-scan .code{font-size:40px} }

/* COURSE: five steps on one line; the line fills and each step lights as you scroll */
.p-course{position:relative;margin-top:clamp(22px,5svh,56px);--p:0}
.p-course .rail{position:absolute;left:7px;top:7px;width:calc(80% + 0px);height:1px;background:rgba(var(--b),.18)}
.p-course .rail i{position:absolute;inset:0;background:linear-gradient(90deg,rgba(var(--a),.6),var(--c));transform:scaleX(var(--p));transform-origin:0 50%}
.p-course ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.p-course li{position:relative;padding-right:clamp(14px,2vw,32px)}
.p-course .nd{position:relative;display:block;width:15px;height:15px;border-radius:50%;background:rgb(var(--ground));box-shadow:inset 0 0 0 1px rgba(var(--b),.35);transition:box-shadow .5s var(--ease)}
.p-course .nd i{position:absolute;inset:4px;border-radius:50%;background:var(--c);transform:scale(0);transition:transform .5s var(--ease)}
.p-course li.on .nd{box-shadow:inset 0 0 0 1px var(--c),0 0 16px -2px rgba(var(--a),.8)}
.p-course li.on .nd i{transform:scale(1)}
.p-course small{display:block;margin:clamp(22px,4svh,38px) 0 10px;font-size:12px;letter-spacing:.16em;color:var(--faint);transition:color .5s}
.p-course b{display:block;font-family:var(--title);font-weight:200;font-size:clamp(20px,min(1.75vw,3.2svh),28px);line-height:1.12;letter-spacing:-.015em;color:var(--faint);transition:color .6s var(--ease)}
.p-course li > span:last-child{display:block;margin-top:12px;font-size:15px;line-height:1.5;color:var(--faint);transition:color .6s var(--ease)}
.p-course li.on small{color:var(--c)} .p-course li.on b{color:var(--paper)} .p-course li.on > span:last-child{color:var(--mute)}
@media (max-width:900px){
  .p-course .rail{left:7px;top:7px;bottom:7px;width:1px;height:auto}
  .p-course .rail i{background:linear-gradient(180deg,rgba(var(--a),.6),var(--c));transform:scaleY(var(--p));transform-origin:50% 0}
  .p-course ol{grid-template-columns:minmax(0,1fr);gap:26px}
  .p-course li{display:grid;grid-template-columns:15px 1fr;column-gap:20px;padding:0}
  .p-course .nd{grid-row:span 3} .p-course small{margin:0 0 6px} .p-course li > span:last-child{margin-top:6px}
}

/* ROUTES: a large-type list; the row you point at opens, and its photograph comes up beside it */
.p-routes{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,72px);align-items:stretch;margin-top:clamp(12px,3svh,32px)}
.p-routes .rl{list-style:none;margin:0;padding:0}
.p-routes .rl li{display:grid;grid-template-columns:44px 1fr 28px;align-items:baseline;column-gap:14px;padding:clamp(18px,3svh,28px) 0;box-shadow:inset 0 -.5px 0 rgba(var(--b),.16);outline:0;cursor:pointer}
.p-routes .rl li:first-child{box-shadow:inset 0 .5px 0 rgba(var(--b),.16),inset 0 -.5px 0 rgba(var(--b),.16)}
.p-routes small{font-size:12px;letter-spacing:.16em;color:var(--faint);transition:color .5s}
.p-routes b{font-family:var(--title);font-weight:200;font-size:clamp(26px,min(3vw,5.4svh),48px);line-height:1.05;letter-spacing:-.025em;color:var(--mute);transition:color .5s var(--ease),translate .6s var(--ease)}
.p-routes .ar{align-self:center;width:24px;height:24px;color:var(--c);opacity:0;translate:-8px 0;transition:opacity .5s var(--ease),translate .6s var(--ease)}
.p-routes .ar svg{width:100%;height:100%}
.p-routes .rl li > span{grid-column:2 / 4;font-size:16px;line-height:1.5;color:var(--mute);max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease),margin .6s var(--ease),opacity .4s var(--ease)}
.p-routes .rl li.on > span{max-height:4em;margin-top:10px;opacity:1}
.p-routes .rl li.on small{color:var(--c)} .p-routes .rl li.on b{color:var(--hi);translate:6px 0} .p-routes .rl li.on .ar{opacity:1;translate:0 0}
.p-routes .rl li:focus-visible b{text-decoration:underline;text-decoration-thickness:.5px;text-underline-offset:6px}
.p-routes .pv{position:relative;margin:0;min-height:clamp(280px,46svh,480px);overflow:hidden;background:rgb(var(--ground));box-shadow:inset 0 0 0 .5px rgba(var(--b),.3)}
.p-routes .pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) sepia(.45) contrast(1.08) brightness(.62);opacity:0;transition:opacity .8s var(--ease)}
.p-routes .pv img.on{opacity:1}
.p-routes .pv::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(var(--ground),.85))}
.p-routes figcaption{position:absolute;left:clamp(16px,1.6vw,24px);bottom:clamp(14px,1.6vw,22px);z-index:2;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--hi)}
@media (max-width:900px){ .p-routes{grid-template-columns:minmax(0,1fr)} .p-routes .rl li.on b{translate:none} .p-routes .pv{display:none} .p-routes .rl li > span{max-height:none;margin-top:8px;opacity:1} .p-routes b{color:var(--paper);font-size:26px} .p-routes .ar{display:none} }

/* FAQ: one question open at a time */
.p-faq{max-width:980px;margin-top:clamp(10px,2.4svh,28px)}
.p-faq .fq{box-shadow:inset 0 -.5px 0 rgba(var(--b),.16)}
.p-faq .fq:first-child{box-shadow:inset 0 .5px 0 rgba(var(--b),.16),inset 0 -.5px 0 rgba(var(--b),.16)}
.p-faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(18px,2.8svh,26px) 0;list-style:none;cursor:pointer;outline:0}
.p-faq summary::-webkit-details-marker{display:none}
.p-faq summary b{font-family:var(--title);font-weight:200;font-size:clamp(20px,min(1.8vw,3.2svh),28px);line-height:1.15;letter-spacing:-.015em;transition:color .4s}
.p-faq summary:hover b,.p-faq summary:focus-visible b,.p-faq .fq[open] summary b{color:var(--hi)}
.p-faq summary i{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(var(--b),.35);color:var(--c);transition:rotate .5s var(--ease),background-color .4s}
.p-faq summary i svg{width:16px;height:16px}
.p-faq .fq[open] summary i{rotate:45deg;background:rgba(var(--a),.12)}
.p-faq .fq > div{overflow:hidden}
.p-faq .fq p{margin:0;padding:0 64px clamp(20px,3svh,28px) 0;max-width:70ch;font-size:16px;line-height:1.6;color:var(--mute)}
.p-faq .fq p a{color:var(--hi)}
.p-faq .fq[open] > div{animation:fqIn .5s var(--ease)}
@keyframes fqIn{from{opacity:0;translate:0 -6px}}
.fq-more{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(18px,3svh,28px);padding:0;border:0;background:none;font:inherit;font-size:15px;color:var(--c);cursor:pointer}
.fq-more svg{width:18px;height:18px;transition:translate .4s var(--ease)} .fq-more:hover svg{translate:4px 0}

/* CLOSE: the prompt bar (the frozen glass card of shared/glass-chat.css, at rest) opens Ask Humo; chips under it; then the footer */
.p-close{display:grid;justify-items:center;margin-top:clamp(18px,4svh,40px)}
.p-close .pb{display:block;width:min(760px,100%);padding:18px 18px 14px 22px;border:1px solid rgba(255,255,255,.18);border-radius:20px;text-align:left;font:inherit;cursor:pointer;
  background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 80px -40px #000,0 0 0 0 rgba(var(--a),0);transition:background-color .4s var(--ease),box-shadow .5s var(--ease),translate .5s var(--ease)}
.p-close .pb:hover,.p-close .pb:focus-visible{background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 30px 80px -40px #000,0 0 0 6px rgba(var(--a),.08);translate:0 -2px;outline:0}
.p-close .pb-in{display:flex;align-items:flex-start;min-height:56px;font-size:17px;line-height:1.5;color:var(--mute)}
.p-close .pb-ph{transition:opacity .4s var(--ease),translate .4s var(--ease)} .p-close .pb-ph.out{opacity:0;translate:0 -6px}
.p-close .pb-car{width:1px;height:1.3em;margin-left:3px;background:var(--c);animation:pbCar 1.1s steps(1) infinite}
@keyframes pbCar{50%{opacity:0}}
.p-close .pb-bar{display:flex;align-items:center;gap:12px;margin-top:8px}
.p-close .pb-b{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.3);color:var(--paper)}
.p-close .pb-b svg{width:18px;height:18px}
.p-close .pb-b.send{width:44px;height:44px;border-radius:12px;background:var(--hi);color:rgb(var(--ground));box-shadow:none;transition:translate .4s var(--ease)}
.p-close .pb:hover .pb-b.send{translate:3px 0}
.p-close .pb-hint{margin-right:auto;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.p-close .pb-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px;max-width:760px}
.p-close .pb-chips button{padding:10px 16px;border:0;border-radius:999px;font:inherit;font-size:14px;color:var(--paper);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 .5px rgba(var(--b),.28);cursor:pointer;transition:background-color .3s,box-shadow .3s}
.p-close .pb-chips button:hover,.p-close .pb-chips button:focus-visible{background:rgba(var(--a),.14);box-shadow:inset 0 0 0 .5px rgba(var(--b),.7);outline:0}
.p-close .pb-chips button.go{background:var(--hi);color:rgb(var(--ground));box-shadow:none}
.p-close .pb-chips button.go:hover{background:#fff}
.p-foot{width:100%;margin-top:clamp(70px,14svh,150px);padding-top:clamp(26px,4svh,40px);box-shadow:inset 0 .5px 0 rgba(var(--b),.18);text-align:left}
.p-foot .ft-top{display:flex;align-items:center;flex-wrap:wrap;gap:20px 34px}
.p-foot .ft-mark{display:flex;align-items:center;gap:12px;color:var(--paper);text-decoration:none;font-size:13px;letter-spacing:.3em;text-transform:uppercase}
.p-foot .ft-mark img{width:30px;height:30px;object-fit:contain}
.p-foot nav{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 auto}
.p-foot nav button{padding:4px 0;border:0;background:none;font:inherit;font-size:14px;color:var(--mute);cursor:pointer;transition:color .3s}
.p-foot nav button:hover,.p-foot nav button:focus-visible{color:var(--hi);outline:0}
.p-foot .ft-mail{font-size:14px;color:var(--hi);text-decoration:none;box-shadow:inset 0 -.5px 0 rgba(var(--b),.5)}
.p-foot .ft-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 30px;margin-top:clamp(22px,4svh,36px);font-size:12.5px;line-height:1.5;color:var(--faint)}
.p-foot .ft-bot p{margin:0;max-width:80ch}
@media (max-width:900px){ .p-foot nav{margin:0;order:3;width:100%} .p-close .pb-in{font-size:16px} }
@media (prefers-reduced-motion:reduce){ .p-figs *,.p-scan *,.p-course *,.p-routes *,.p-faq *,.p-close *{transition:none!important;animation:none!important} }
/* SCAN, motion pass (2026-10-19): scroll-driven, so the bars carry no transition; rows brighten with --f, ticks draw on pass */
.p-scan{--p:0}
.p-scan .crit li{--f:0;opacity:calc(.32 + var(--f) * .5);transition:opacity .25s linear}
.p-scan .crit li.on,.p-scan .crit li.hi{opacity:1}
.p-scan .crit li b{display:inline-block;translate:calc((1 - var(--f)) * 10px) 0;transition:translate .25s linear,color .5s}
.p-scan .crit li.now b{color:var(--hi)}
.p-scan .crit li.now .tk{box-shadow:inset 0 0 0 .5px rgba(var(--b),.4),0 0 0 calc(var(--f) * 5px) rgba(var(--a),.12)}
.p-scan .tk{position:relative}
.p-scan .tk::before{content:"";position:absolute;inset:-1px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--f) * 360deg),transparent 0);
  -webkit-mask:radial-gradient(circle,transparent 11.5px,#000 12px);mask:radial-gradient(circle,transparent 11.5px,#000 12px)}
.p-scan .crit li.on .tk::before{opacity:0;transition:opacity .4s}
.p-scan .tk path{stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .5s var(--ease) .1s}
.p-scan .crit li.on .tk{scale:1;animation:tkPop .55s var(--ease)}
.p-scan .crit li.on .tk path{stroke-dashoffset:0}
@keyframes tkPop{0%{scale:.6}60%{scale:1.15}100%{scale:1}}
.p-scan .meter u{transition:none;will-change:transform}
.p-scan .meter li.on u{transform:scaleX(1)}
.p-scan .meter li.on i{box-shadow:0 0 12px -2px rgba(var(--a),.7)}
.p-scan .meter em{translate:-6px 0;transition:opacity .4s var(--ease),translate .5s var(--ease)}
.p-scan .meter li.on em{translate:0 0}
.p-scan .card{overflow:hidden}
.p-scan .beam{position:absolute;left:0;right:0;top:0;height:90px;z-index:0;pointer-events:none;
  translate:0 calc(var(--p) * 520px - 60px);background:linear-gradient(180deg,transparent,rgba(var(--a),.09) 70%,rgba(var(--b),.55) 99%,transparent);opacity:.9;transition:opacity .6s}
.p-scan.live .beam{opacity:0}
.p-scan .card > *:not(.beam):not(.glint){position:relative;z-index:1}
.p-scan .glint{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(246,236,214,.16) 50%,transparent 65%);translate:-110% 0}
.p-scan.live .glint{animation:scGlint 1.3s var(--ease) .15s}
@keyframes scGlint{to{translate:110% 0}}
.p-scan .pc{margin-left:6px;font-weight:400;font-variant-numeric:tabular-nums;color:var(--c)}
.p-scan.live .pc{opacity:0;transition:opacity .4s}
.p-scan .code{font-variant-numeric:tabular-nums;transition:color .6s,text-shadow .8s}
.p-scan:not(.live) .code{color:rgba(var(--b),.55)}
.p-scan.live .code{text-shadow:0 0 30px rgba(var(--a),.35)}
.p-scan .nm i{background:linear-gradient(90deg,rgba(var(--b),.1),rgba(var(--b),.26),rgba(var(--b),.1));background-size:200% 100%;animation:nmShim 2.4s linear infinite}
@keyframes nmShim{to{background-position:-200% 0}}
.p-scan.live .dot{animation:dotRing 1.6s ease-out 2}
@keyframes dotRing{0%{box-shadow:0 0 0 0 rgba(159,224,176,.6)}100%{box-shadow:0 0 0 10px rgba(159,224,176,0)}}
@media (prefers-reduced-motion:reduce){ .p-scan .beam,.p-scan .glint{display:none} .p-scan .nm i{animation:none} }
/* CLOSE, one bar (2026-10-19): the tags sit inside the bar next to the plus, as rounded rectangles */
.p-close .pb{cursor:default}
.p-close .pb-in{width:100%;padding:0;border:0;background:none;font:inherit;font-size:17px;line-height:1.5;color:var(--mute);text-align:left;cursor:text;outline:0}
.p-close .pb:has(.pb-in:hover),.p-close .pb:focus-within{background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 30px 80px -40px #000,0 0 0 6px rgba(var(--a),.08)}
.p-close .pb-b{padding:0;border:0;background:none;cursor:pointer;transition:background-color .3s,translate .4s var(--ease)}
.p-close .pb-b:not(.send):hover{background:rgba(255,255,255,.08)}
.p-close .pb-b.send:hover{translate:3px 0}
.p-close .pb-bar{align-items:center}
.p-close .pb-bar .pb-chips{flex:1;display:flex;flex-wrap:wrap;justify-content:flex-start;gap:8px;margin:0;max-width:none}
.p-close .pb-bar .pb-chips button{padding:8px 13px;border-radius:10px;font-size:13.5px}

/* SCAN AS AN INSTRUMENT (2026-10-19): an orbital dial and a readout (ui.scan in parts2.js) */
.p-dial{--p:0;justify-self:stretch;align-self:center;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,100px);align-items:center;margin-top:clamp(6px,2svh,24px)}
.p-dial .dial{position:relative;width:min(100%,calc(100svh - 330px),560px);aspect-ratio:1;justify-self:center}
.p-dial svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.p-dial .dtk{}
.p-dial .dtk line{stroke:rgba(246,236,214,.22);stroke-width:1}
.p-dial .dtk line.b{stroke:rgba(246,236,214,.5)}
.p-dial .ring{fill:none;stroke:rgba(246,236,214,.1);stroke-width:1;stroke-dasharray:2 6}
.p-dial .ring2{fill:none;stroke:rgba(246,236,214,.08);stroke-width:1}
.p-dial .trk{fill:none;stroke:rgba(246,236,214,.12);stroke-width:10;stroke-linecap:butt}
.p-dial .fil{fill:none;stroke:var(--c);stroke-width:10;stroke-linecap:butt;stroke-dasharray:0 1;filter:drop-shadow(0 0 6px rgba(var(--a),.45))}
.p-dial .fil.ok{stroke:var(--hi);filter:drop-shadow(0 0 10px rgba(var(--a),.7))}
.p-dial.live svg .ring2{stroke:rgba(var(--a),.55);filter:drop-shadow(0 0 8px rgba(var(--a),.6));transition:stroke .8s}
.p-dial .sweep{position:absolute;inset:7%;border-radius:50%;pointer-events:none;
  background:conic-gradient(from -18deg,transparent 0deg,rgba(var(--a),.0) 300deg,rgba(var(--a),.16) 352deg,rgba(246,236,214,.5) 359.5deg,transparent 360deg);
  -webkit-mask:radial-gradient(circle,transparent 46%,#000 47%,#000 69%,transparent 70%);mask:radial-gradient(circle,transparent 46%,#000 47%,#000 69%,transparent 70%);transition:opacity .8s}
.p-dial.live .sweep{opacity:0}
.p-dial .dl{position:absolute;translate:-50% -50%;display:flex;align-items:baseline;gap:7px;white-space:nowrap;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);transition:color .5s}
.p-dial .dl i{font-style:normal;font-size:10.5px;color:var(--faint)}
.p-dial .dl.on{color:var(--paper)} .p-dial .dl.ok{color:var(--hi)} .p-dial .dl.ok i,.p-dial .dl.on i{color:var(--c)}
.p-dial .core{position:absolute;inset:24%;display:grid;place-content:center;justify-items:center;text-align:center;gap:8px;border-radius:50%}
.p-dial .core .dst{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.p-dial.live .core .st{color:#9fe0b0}
.p-dial .code{font-family:var(--title);font-weight:200;font-size:clamp(34px,min(4vw,6.4svh),62px);line-height:1;letter-spacing:.02em;color:rgba(var(--b),.55);font-variant-numeric:tabular-nums;transition:color .6s,text-shadow .8s}
.p-dial.live .code{color:var(--hi);text-shadow:0 0 34px rgba(var(--a),.4)}
.p-dial .nm{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--faint)}
.p-dial .nm i{width:20px;height:6px;border-radius:2px;background:rgba(var(--b),.16)} .p-dial .nm i:nth-child(2){width:34px} .p-dial .nm i:nth-child(3){width:14px;margin-right:6px}
.p-dial .core .pc{font-weight:400;font-size:13px;letter-spacing:.06em;color:var(--c);font-variant-numeric:tabular-nums;transition:opacity .4s}
.p-dial.live .core .pc{opacity:0}
.p-dial .read{display:grid;gap:clamp(22px,4svh,40px)}
.p-dial .dnow .ix{display:block;font-size:12px;letter-spacing:.18em;color:var(--c);font-variant-numeric:tabular-nums}
.p-dial .dnow .nt{display:block;margin-top:12px;font-family:var(--title);font-weight:200;font-size:clamp(36px,min(4vw,7svh),64px);line-height:1;letter-spacing:-.03em;color:var(--hi)}
.p-dial .dnow .nl{margin:14px 0 0;max-width:34ch;font-size:16.5px;line-height:1.5;color:var(--mute)}
.p-dial .dnow.dsw .nt,.p-dial .dnow.dsw .nl{animation:dlSwap .6s cubic-bezier(.16,1,.3,1)}
@keyframes dlSwap{from{opacity:0;translate:0 10px}}
.p-dial .ledger{list-style:none;margin:0;padding:0;display:grid}
.p-dial .ledger li{display:grid;grid-template-columns:34px 1fr auto 22px;align-items:center;gap:12px;padding:12px 0;box-shadow:inset 0 -.5px 0 rgba(var(--b),.14);font-size:15px;color:var(--faint);transition:color .5s}
.p-dial .ledger li:first-child{box-shadow:inset 0 .5px 0 rgba(var(--b),.14),inset 0 -.5px 0 rgba(var(--b),.14)}
.p-dial .ledger .no{font-size:11px;letter-spacing:.14em}
.p-dial .ledger b{font-weight:400}
.p-dial .ledger em{font-style:normal;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.p-dial .ledger .tk2{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(var(--b),.35);color:transparent;transition:background-color .4s,color .4s}
.p-dial .ledger .tk2 svg{width:12px;height:12px}
.p-dial .ledger li.on{color:var(--paper)} .p-dial .ledger li.on em{color:var(--c)}
.p-dial .ledger li.ok{color:var(--paper)} .p-dial .ledger li.ok em{color:var(--hi)} .p-dial .ledger li.ok .tk2{background:var(--c);color:rgb(var(--ground));box-shadow:none}
.p-dial .foot{margin:0;font-size:13px;line-height:1.5;color:var(--faint)}
@keyframes dlTurn{to{transform:rotate(360deg)}}
@media (max-width:900px){ .p-dial{grid-template-columns:minmax(0,1fr);gap:30px} .p-dial .dial{width:min(100%,420px)} .p-dial .dl{font-size:10px;letter-spacing:.1em} .p-dial .dnow .nt{font-size:34px} }
@media (prefers-reduced-motion:reduce){ .p-dial .dtk{animation:none} .p-dial .sweep{display:none} .p-dial *{transition:none!important;animation:none!important} }

.p-dial .dnow,.p-dial .dnow > *,.p-dial .ledger li,.p-dial .core > *,.p-dial .dl{opacity:1!important;visibility:visible!important}
.p-dial .dnow,.p-dial .dnow > *,.p-dial .ledger,.p-dial .ledger li,.p-dial .foot{transform:none!important;translate:none!important}
.p-dial .read{grid-template-rows:auto auto auto}

/* =========================================================================================
   POLISH PASS (2026-10-20): the board-review list.
   ========================================================================================= */
/* WORK: each route drawn as what it does, over a dot grid, and set out as a sheet under it (ui.routes, GLYPH in parts2.js) */
.p-routes .rd{display:flex;flex-direction:column;overflow:hidden;background-color:rgba(var(--ground),.55)}
.p-routes .gl{position:relative;flex:1 1 auto;min-height:clamp(190px,28svh,300px);box-shadow:inset 0 -.5px 0 rgba(var(--b),.16)}
.p-routes .gl::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(var(--b),.22) .8px,transparent 1.3px);background-size:22px 22px;background-position:11px 11px;
  -webkit-mask:radial-gradient(closest-side,#000 30%,transparent);mask:radial-gradient(closest-side,#000 30%,transparent)}
.p-routes .g{position:absolute;inset:7% 5%;width:90%;height:86%;overflow:visible;opacity:0;transition:opacity .5s var(--ease)}
.p-routes .g.on{opacity:1;transition:opacity .4s var(--ease)}
.p-routes .g > :not(.ky):not(.pu){opacity:0;transition:opacity .4s var(--ease)}
.p-routes .g.on > :not(.ky):not(.pu){opacity:1;transition:opacity .8s var(--ease) .05s}
.p-routes .g.on > .nd,.p-routes .g.on > .rg,.p-routes .g.on > .ah,.p-routes .g.on > .tk3,.p-routes .g.on > .dm,.p-routes .g.on > .lb{transition-delay:.85s}
.p-routes .g .zn{fill:rgba(var(--a),.05);stroke:rgba(var(--b),.34);stroke-width:1;stroke-dasharray:3 5}
.p-routes .g .wl{fill:none;stroke:rgba(var(--b),.6);stroke-width:1.5}
.p-routes .g .dc{fill:none;stroke:rgba(var(--b),.55);stroke-width:1;stroke-linejoin:round}
.p-routes .g .ln{fill:none;stroke:rgba(var(--b),.24);stroke-width:1}
.p-routes .g .ky{fill:none;stroke:var(--c);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1;filter:drop-shadow(0 0 5px rgba(var(--a),.55))}
.p-routes .g.on .ky{animation:rtDraw 1.3s cubic-bezier(.65,0,.35,1) calc(.12s + var(--k) * .16s) forwards}
@keyframes rtDraw{to{stroke-dashoffset:0}}
.p-routes .g .ah,.p-routes .g .tk3{fill:none;stroke:var(--c);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.p-routes .g .hub{fill:rgb(var(--ground));stroke:var(--hi);stroke-width:1.5}
.p-routes .g .nd{fill:var(--hi)}
.p-routes .g .dm{fill:rgba(var(--b),.5)}
.p-routes .g .rg{fill:none;stroke:rgba(var(--b),.42);stroke-width:1}
.p-routes .g .sl{fill:rgb(var(--ground));stroke:var(--c);stroke-width:1.2}
.p-routes .g .pu{fill:#fff8ea;filter:drop-shadow(0 0 6px rgba(var(--a),1));opacity:0}
.p-routes .g.on .pu{opacity:1;transition:opacity .5s 1.4s}
.p-routes .g .lb{fill:var(--mute);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-anchor:middle}
.p-routes .tx{display:grid;padding:clamp(18px,2.6svh,28px) clamp(20px,2vw,30px) clamp(18px,2.6svh,26px)}
.p-routes .sh{grid-area:1 / 1;opacity:0;visibility:hidden;translate:0 8px;transition:opacity .3s var(--ease),translate .5s var(--ease),visibility 0s linear .3s}
.p-routes .sh.on{opacity:1;visibility:visible;translate:0 0;transition:opacity .6s var(--ease) .12s,translate .7s var(--ease) .12s,visibility 0s}
.p-routes .sh small{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--c);font-variant-numeric:tabular-nums}
.p-routes .sh h3{margin:8px 0 clamp(10px,1.8svh,16px);font-family:var(--title);font-weight:200;font-size:clamp(24px,min(2.2vw,4svh),32px);line-height:1.08;letter-spacing:-.02em;color:var(--hi)}
.p-routes .sh dl{margin:0;display:grid}
.p-routes .sh dl div{display:grid;grid-template-columns:112px minmax(0,1fr);gap:16px;padding:clamp(8px,1.3svh,11px) 0;box-shadow:inset 0 .5px 0 rgba(var(--b),.14)}
.p-routes .sh dt{padding-top:3px;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.p-routes .sh dd{margin:0;font-size:14.5px;line-height:1.45;color:var(--paper)}
.p-routes .sh .ask{display:inline-flex;align-items:center;gap:10px;margin-top:clamp(10px,1.8svh,16px);padding:0;border:0;background:none;font:inherit;font-size:14px;color:var(--c);cursor:pointer}
.p-routes .sh .ask svg{width:16px;height:16px;transition:translate .4s var(--ease)} .p-routes .sh .ask:hover svg,.p-routes .sh .ask:focus-visible svg{translate:4px 0}
.p-routes .sh .ask:focus-visible{outline:1px solid var(--hi);outline-offset:4px}
@media (max-width:900px){ .p-routes .pv.rd{display:flex;margin-top:6px} .p-routes .gl{min-height:200px} .p-routes .sh dl div{grid-template-columns:96px minmax(0,1fr);gap:12px} }
@media (prefers-reduced-motion:reduce){ .p-routes .g .ky{stroke-dashoffset:0} .p-routes .g .pu{display:none} }

/* WHY IT MATTERS: the mark at the top of every card, the words at its foot, so the three line up both ways */
.p-steps.plain .p-step .ms{margin-top:0}
.p-steps.plain .p-step .ms + b{margin-top:auto;padding-top:32px}

/* the screening ledger's tick, drawn by a mask so the motion layer cannot reach it */
.p-dial .ledger .tk2 svg{display:none}
.p-dial .ledger .tk2::after{content:"";width:12px;height:12px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.2 3L13 4.6' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.6l3.2 3L13 4.6' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat}

/* QUESTIONS: the list runs the full measure of the page, like every other section */
.p-faq{max-width:none}

/* THE FOOT: the fine print sits against the right edge, set right, so both lines of the foot end on the grid */
.p-foot .ft-bot p:last-child{max-width:64ch;text-align:right}
@media (max-width:900px){ .p-foot .ft-bot p:last-child{text-align:left} }

/* the pill steps aside while the bar at the foot is on screen: it is the same thing, and two would compete */
.humo{transition:opacity .5s var(--ease),translate .6s var(--ease)}
html.near-close .humo{opacity:0;translate:0 14px;pointer-events:none}
/* the chosen route's nudge is "left", which GSAP never reads: as "translate" it was folded into an inline transform and stuck */
.p-routes .rl li b{position:relative;left:0;transition:color .5s var(--ease),left .6s var(--ease)}
.p-routes .rl li.on b{translate:none;left:6px}
.p-routes .sh dt{color:var(--mute)}
.p-routes .sh dd{text-wrap:pretty}
@media (max-width:900px){ .p-routes .rl li.on b{left:0} }
/* WHO: a closed panel shows a trace of its photograph, so the four read as four people, not three empty slots */
.screen.long .p-pan:not(.sel) .art{opacity:.2}
.screen.long .p-pan:not(.sel):hover .art{opacity:.34}
/* the line under a heading never leaves one or two words on their own */
.q p{text-wrap:balance}
/* the close never grows past the screen: its column is the screen, and the tags scroll inside the bar (phones) */
.p-close{grid-template-columns:minmax(0,1fr)}
.p-close .pb,.p-close .p-foot{min-width:0;max-width:100%}
.p-close .pb-bar,.p-close .pb-bar .pb-chips{min-width:0}
@media (max-width:640px){ .p-foot .ft-top{gap:16px 20px} .p-foot .ft-mail{order:2;width:100%;overflow-wrap:anywhere} .p-routes .g .lb{font-size:15px} }