/* LANDING PAGE (2026-10-19, user: "make the page scroll like it does on creative", "remove it as a form", "it needs to be like a
   landing page, let the chat build the form"). On the desktop each pathway is one page: its sections stacked, each the height of
   the window, scrolled with Lenis at Creative's settings (shared/one.js glide), rising as they arrive. The questions are asked by
   Ask Humo. Phones keep mobile.css's story layout. Loaded after mobile.css. */
@media (min-width:761px){
  html.long .stage{inset:0}
  html.long .screen.long{display:block;overflow-y:auto;overflow-x:hidden;padding:0;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
  html.long .screen.long::-webkit-scrollbar{width:6px} html.long .screen.long::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:3px}
  .screen.long .lane{padding:0 var(--gut) 0 var(--lead)}
  /* a section: the old screen's geometry, one window tall */
  .screen.long .blk{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,72px);align-items:center;
    padding:var(--top) 0 var(--foot)}
  .screen.long .blk.wide{grid-template-columns:minmax(0,1fr);align-content:center}
  .screen.long .blk:not(.wide) .sys{height:calc(100svh - var(--top) - var(--foot));min-height:420px}
  .screen.long .blk.wide .sys{position:relative}
  /* the opening section of the pathway: the headline, centred, and a scroll cue */
  .screen.long .blk.hero{align-content:center;text-align:center;padding-top:0}
  .screen.long .blk.hero .q{max-width:none;margin:0 auto}
  .screen.long .blk.hero .q h2{max-width:20ch;margin:0 auto;font-size:clamp(34px,min(4.6vw,8svh),70px);line-height:1.04}
  .screen.long .blk.hero .q p{max-width:52ch;margin:22px auto 0;font-size:17px}
  .screen.long .blk.hero .q::after{content:"Scroll";display:block;width:fit-content;margin:clamp(28px,7svh,64px) auto 0;padding-top:46px;font-family:var(--title);font-weight:200;font-size:12px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--mute);background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)) 50% 0/1px 34px no-repeat;animation:lCue 2.2s var(--ease) infinite}
  .screen.long .blk.hero .sys{display:none}
  @keyframes lCue{0%{background-size:1px 0}50%{background-size:1px 34px;background-position:50% 0}100%{background-size:1px 0;background-position:50% 34px}}
  /* the close of the page hands over to Ask Humo */
  .screen.long .blk.end{min-height:72svh;grid-template-columns:minmax(0,1fr);justify-items:center;align-content:center;text-align:center;padding-bottom:calc(var(--foot) + 40px)}
  .screen.long .blk.end .q{max-width:none;margin:0 auto}
  .screen.long .blk.end .q h2{margin:0 auto;max-width:22ch}
  .screen.long .blk.end .q p{margin:18px auto 0;max-width:52ch}
  .screen.long .blk.end .go{display:inline-flex!important;margin-top:34px}
  /* each section rises as it arrives */
  html.l-rev .screen.long .blk:not(.hero){opacity:0;translate:0 26px;transition:opacity .9s var(--ease),translate 1s var(--ease)}
  html.l-rev .screen.long .blk.in{opacity:1;translate:0 0}
  /* the bar has nothing to step through on the landing page */
  html.long .bar .go{display:none!important}
}
@media (prefers-reduced-motion:reduce){ .screen.long .blk.hero .q::after{animation:none} }
/* the Exchange portfolio sectors: five cards in a row, display only */
.p-cards.n5{grid-template-columns:repeat(5,minmax(0,1fr));max-width:none;margin-top:clamp(18px,4svh,40px)}
.p-cards.n5 .p-card{height:clamp(240px,40svh,340px);cursor:default}
.p-cards.n5 .p-card b{font-size:clamp(19px,min(1.6vw,3.2svh),26px)}
.p-cards.n5 .p-card .ms{display:block;margin-bottom:12px;font-size:26px}
@media (max-width:1100px) and (min-width:761px){ .p-cards.n5{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:760px){ .p-cards.n5{grid-template-columns:minmax(0,1fr)} .p-cards.n5 .p-card{height:auto;min-height:96px} }
/* the Exchange "Join the Exchange" section: a desktop view of the platform beside the three things members do (2026-10-19) */
.p-plat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(24px,3.4vw,56px);align-items:center;width:100%;margin-top:clamp(14px,3svh,30px)}
.p-plat .shot{position:relative;margin:0;padding:0;overflow:hidden;background:#0b0a08;box-shadow:inset 0 0 0 .5px rgba(var(--b),.3),0 40px 90px -40px #000}
.p-plat .chrome{display:flex;align-items:center;gap:6px;height:28px;padding:0 12px;background:rgba(255,255,255,.04);box-shadow:inset 0 -.5px 0 rgba(var(--b),.18)}
.p-plat .chrome i{width:7px;height:7px;border-radius:50%;background:rgba(var(--b),.28)}
.p-plat .chrome b{margin-left:10px;font-weight:400;font-size:11px;letter-spacing:.04em;color:var(--mute)}
.p-plat img{display:block;width:100%;height:auto;max-height:calc(100svh - 360px);object-fit:cover;object-position:50% 0}
.p-plat figcaption{position:absolute;left:12px;bottom:10px;padding:4px 9px;font-size:11px;color:var(--mute);background:rgba(8,7,5,.72);border-radius:2px}
.p-plat .acts{list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,3svh,30px)}
.p-plat .acts li{display:grid;grid-template-columns:34px 1fr;column-gap:14px;row-gap:6px;padding-top:clamp(14px,2.4svh,22px);box-shadow:inset 0 .5px 0 rgba(var(--b),.18)}
.p-plat .acts .ms{grid-row:span 2;font-size:26px;color:var(--c)}
.p-plat .acts b{font-family:var(--title);font-weight:200;font-size:clamp(20px,min(1.8vw,3.2svh),28px);line-height:1.1;letter-spacing:-.01em}
.p-plat .acts span{font-size:15px;line-height:1.5;color:var(--mute)}
@media (max-width:900px){ .p-plat{grid-template-columns:minmax(0,1fr)} .p-plat img{max-height:none} }
.screen.long .p-join{margin:clamp(18px,3svh,30px) 0 0;justify-self:start;align-self:start}   /* on the grid's left edge, clear of the pill (2026-10-20) */
/* the Exchange hero (2026-10-19): headline at the top, the desktop view of the platform in front of the Earth, rising off the bottom edge */
.screen.long .blk.hero:has(.p-hshot){align-content:start;row-gap:0;padding-top:calc(var(--top) + 3svh);padding-bottom:0;min-height:100svh;overflow:hidden}
.screen.long .blk.hero:has(.p-hshot) .q::after{display:none}
.screen.long .blk.hero:has(.p-hshot) .q h2,.screen.long .blk.hero:has(.p-hshot) .q h1{font-size:clamp(32px,min(4vw,7svh),60px)}
.screen.long .blk.hero:has(.p-hshot) .q p{margin-top:16px}
.screen.long .blk.hero:has(.p-hshot) .sys{display:block!important;height:auto;min-height:0;margin-top:clamp(64px,13svh,140px);perspective:1800px}
/* premium pass (user, 2026-10-19: "HD", "more premium"): a thin frosted bezel instead of browser dots, a gold glint on the top
   edge, a soft gold bloom and a deep shadow; the screenshot (2880 x 1800, webp q96) lands flat so it stays pixel sharp */
.p-hshot{position:relative;width:min(1080px,78%);margin:0 auto;padding:9px;border-radius:20px;
  background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.03) 40%,rgba(255,255,255,.015));-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 .5px rgba(246,236,214,.22),0 0 0 .5px rgba(0,0,0,.6),0 -40px 160px -70px rgba(234,214,174,.5),0 70px 140px -50px rgba(0,0,0,.95);
  transform-origin:50% 100%;animation:hshot 1.6s cubic-bezier(.16,1,.3,1) .35s both;
  -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}
.p-hshot .glint{position:absolute;left:12%;right:12%;top:0;height:1px;z-index:2;background:linear-gradient(90deg,transparent,rgba(246,236,214,.9) 50%,transparent);pointer-events:none}
.p-hshot img,.p-hshot video{display:block;width:100%;height:auto;border-radius:12px;box-shadow:0 0 0 .5px rgba(246,236,214,.16);max-height:calc(100svh - var(--top) - 230px);object-fit:cover;object-position:50% 0}
@keyframes hshot{from{opacity:0;transform:rotateX(18deg) translateY(60px)}to{opacity:1;transform:none}}   /* it lands flat, so the screenshot stays pixel sharp */
@media (max-width:760px){ .screen.long .blk.hero:has(.p-hshot){padding-top:96px} .p-hshot{width:100%;border-radius:8px 8px 0 0;transform:none;animation:none} .p-hshot img,.p-hshot video{max-height:none} }
@media (prefers-reduced-motion:reduce){ .p-hshot{animation:none} }
/* the Earth behind the hero's platform view: lit and lifted while the hero is on screen (exchange/index.html toggles html.hero-in) */
html[data-path="exchange"].hero-in .room .globe{opacity:.22;filter:saturate(.75) brightness(.9);--ety:-4vh}   /* quieter behind the platform (user, 2026-10-19) */
@media (max-width:760px){ html[data-path="exchange"].hero-in .room .globe{--ety:6vh} }
/* the title sits in the middle of the window, the platform starts low and rises into view as you scroll (user, 2026-10-19) */
@media (min-width:761px){
  .screen.long .blk.hero:has(.p-hshot){padding-top:0;min-height:0}
  .screen.long .blk.hero:has(.p-hshot) .q{min-height:calc(100svh - 480px);display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--top) * .5)}
  .screen.long .blk.hero:has(.p-hshot) .sys{margin-top:0!important}
  .p-hshot img,.p-hshot video{max-height:none}
}
/* the Exchange "Why it matters" cards only show (user, 2026-10-19: "remove hover"): no lift, glow, colour change or hidden text */
.p-steps.plain .p-step,.p-steps.plain .p-step:hover{translate:none;background-color:rgba(255,255,255,.05);box-shadow:inset 0 0 0 .5px rgba(var(--b),.22),inset 0 1px 0 rgba(255,255,255,.08)}
.p-steps.plain .p-step:hover b{color:inherit}
.p-steps.plain .p-step > span{max-height:none!important;margin-top:10px!important;opacity:1!important;translate:none!important}
.p-steps.plain .p-step .art{display:none}
/* LANDING PAGE, second pass (user, 2026-10-19): the sectors mosaic starts on the same line as its heading (the section grid centred
   it), sections that need less than a window are not stretched to one, and a section index runs down the right edge */
.p-mosaic{justify-self:stretch;max-width:none;width:100%;height:clamp(360px,calc(100svh - 380px),620px)}
@media (min-width:761px){
  .screen.long .blk.slim{min-height:0;padding-top:clamp(70px,14svh,150px);padding-bottom:clamp(40px,8svh,90px)}
  .screen.long .blk.close{min-height:100svh;align-content:end;padding-bottom:110px}
  .screen.long .blk.close .q{text-align:center;max-width:none;margin:0 auto}
  .screen.long .blk.close .q h2{margin:0 auto;font-size:clamp(34px,min(4.6vw,8svh),70px);line-height:1.04}
  .screen.long .blk.close .q p{margin:18px auto 0;max-width:52ch}
}
@media (max-width:760px){ .blk.close .q{text-align:center} .blk.close .q h2,.blk.close .q p{margin-left:auto;margin-right:auto} }
.l-idx{position:fixed;right:clamp(14px,1.6vw,26px);top:50%;z-index:30;display:none;flex-direction:column;align-items:flex-end;gap:2px;translate:0 -50%}
@media (min-width:1100px){ html.long .l-idx{display:flex} }
.l-idx button{position:relative;display:flex;align-items:center;justify-content:flex-end;gap:12px;height:20px;padding:0 0 0 20px;border:0;background:none;cursor:pointer;color:var(--mute)}
.l-idx button::after{content:"";width:14px;height:1px;background:rgba(var(--b),.35);transition:width .5s var(--ease),background-color .4s}
.l-idx span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;opacity:0;translate:6px 0;transition:opacity .35s var(--ease),translate .45s var(--ease)}
.l-idx button:focus-visible span,.l-idx:hover button span{opacity:1;translate:0 0}
.l-idx button.on{color:var(--hi)} .l-idx button.on::after{width:30px;background:var(--c)}
.l-idx button:hover::after{width:22px;background:rgba(var(--b),.8)}
.l-idx:hover button:not(:hover):not(.on) span{opacity:.55}
.l-idx:hover::before{content:"";position:absolute;inset:-14px -14px -14px -60px;z-index:-1;background:linear-gradient(90deg,transparent,rgba(var(--ground),.88) 40%);pointer-events:none}
/* (2026-10-20) the full-width mosaic's height is for desktops: on a phone its rows set its height, or the last tile ran under the next heading */
@media (max-width:760px){ .p-mosaic{height:auto} }   /* the same breakpoint as the phone mosaic in parts2.css */