/* mth-stage: desktop "pinned deck" for FROM MEMBER TO HOST (the uxpeak stack-swap pattern).
   Only active when mth-stage.js adds .m3-staged to #member-to-host (wide, tall, motion-allowed screens). */
#member-to-host.m3-staged{overflow:clip}   /* overflow:hidden would kill position:sticky */
#member-to-host.m3-staged .m3-stage{position:relative}
#member-to-host.m3-staged .m3-stage>.m3-intro{
  position:sticky;top:64px;height:calc(100vh - 88px);
  grid-template-columns:clamp(330px,24vw,430px) minmax(0,1fr);
  gap:clamp(20px,2.4vw,40px);align-items:stretch}
#member-to-host.m3-staged .m3-tlbox{display:flex;flex-direction:column;justify-content:center;padding:20px 20px 4px;overflow:hidden}
#member-to-host.m3-staged .m3-path{height:auto;flex:0 0 auto;max-width:none;width:100%}
#member-to-host.m3-staged .m3-path .m2-step{padding-bottom:20px}
#member-to-host.m3-staged .m3-heroslot{display:none}

/* the deck: panels stack here, each one slides up over the last */
#member-to-host .m3-deck{position:relative;min-width:0;border-radius:18px;overflow:hidden;
  background:var(--card);border:1px solid var(--hair);box-shadow:inset 0 2px 6px rgba(0,0,0,.9)}
#member-to-host .m3-deck>.m3-show{
  position:absolute;inset:0;margin:0;padding:clamp(20px,2.6vw,44px);box-sizing:border-box;
  align-content:center;justify-content:center;overflow:hidden;
  will-change:transform,opacity;backface-visibility:hidden;
  background:var(--card);border:0;border-radius:0;box-shadow:none}
#member-to-host .m3-deck>.m3-show[data-state="off"]{visibility:hidden}
#member-to-host .m3-deck>.m3-show{--art-h:clamp(240px,min(34cqi,48vh),440px)}
#member-to-host .m3-deck .m3-panel{display:none}   /* the 02/03 shortcut rows are redundant once the cards swap in the deck */
/* 02 BE KNOWN is three across; keep it on one row inside the deck */
#member-to-host .m3-deck .m3-rep{flex-wrap:nowrap;gap:clamp(14px,1.8vw,30px);display:flex}
#member-to-host .m3-deck .m3-rep .m3-rep-vid,#member-to-host .m3-deck .m3-rep .pp-poster-col{flex:0 0 auto;width:var(--pp-poster-w)}
#member-to-host .m3-deck .m3-rep .m3-rep-txt{flex:1 1 15rem;min-width:0}
#member-to-host .m3-deck .m3-rep h3{font-size:clamp(24px,2.5vw,40px)}

/* ---- panel styling (Grif, Oct 16): the two pinned panels were flat #0b0b0b boxes with a grey hairline, and the box art
   sat in a visible black rectangle on top. Now: pure black glass (so the art's black ground melts in), a faint warm
   floor glow, a hairline that warms to orange at the top edge, and no inset shadow. ---- */
#member-to-host.m3-staged .m3-tlbox,
#member-to-host .m3-deck{
  background:
    radial-gradient(120% 70% at 50% 115%,rgba(255,122,41,.07),transparent 62%),
    #000;
  border:1px solid rgba(255,122,41,.10);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 24px 60px -30px rgba(255,122,41,.18);
  isolation:isolate}
#member-to-host.m3-staged .m3-tlbox::before,
#member-to-host .m3-deck::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;z-index:5;
  background:linear-gradient(180deg,rgba(255,122,41,.55),rgba(255,122,41,.08) 22%,rgba(255,255,255,.04) 60%,rgba(255,122,41,.12));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
#member-to-host.m3-staged .m3-tlbox{position:relative}
#member-to-host .m3-deck>.m3-show{background:#000}

/* compact timeline for laptop-height screens (mth-stage.js adds .m3-compact only when the full timeline would be clipped) */
#member-to-host.m3-staged.m3-compact .m3-path .m2-step p,
#member-to-host.m3-staged.m3-compact .m3-path .m2-chips{display:none}
#member-to-host.m3-staged.m3-compact .m3-path .m2-step{padding-bottom:10px}
#member-to-host.m3-staged.m3-compact .m3-path .m2-step h3{margin-bottom:6px}

/* narrow deck (laptop widths): 02 BE KNOWN drops its looping art so the text keeps a readable column; the video pop-up stays */
#member-to-host .m3-deck{container-type:size;container-name:m3deck}
@container m3deck (max-width:1000px){
  #member-to-host .m3-deck .m3-rep .m3-rep-vid{display:none}
  #member-to-host .m3-deck .m3-rep .m3-rep-txt{flex:1 1 auto}
}

/* ---- fill the deck (Grif, Oct 17): on wide/tall windows the cards sat as a small island in a sea of black, because the art
   was capped at 440px tall and the headlines at 52px whatever the deck size. In a deck wider than 760px (where the cards are
   two-up) everything now scales off the deck itself (cqi = deck width, cqb = deck height), so a 1150x1300 deck gets ~1.6x
   art and type. Narrower decks (laptops, where the cards stack) and the classic / mobile layout are untouched. ---- */
#member-to-host.m3-staged .m3-stage>.m3-intro{grid-template-columns:clamp(330px,24vw,480px) minmax(0,1fr)}
@container m3deck (min-width:761px){
  #member-to-host .m3-deck>.m3-show{--art-h:clamp(240px,min(62cqi,66cqb),880px);padding:clamp(24px,3.4cqi,64px)}
  #member-to-host .m3-deck .m3-pass,#member-to-host .m3-deck .m3-plus{column-gap:clamp(24px,4.5cqi,80px)}
  #member-to-host .m3-deck .m3-pass{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
  /* every card's art reads at the 01 passport's size (Grif, Oct 17): 04's square box gets the wide column and may spill into
     the black gutter (its sides are only black + sparks), 03's wide lettering becomes a full-width banner over its text */
  #member-to-host .m3-deck .m3-plus{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
  #member-to-host .m3-deck .m3-plus .m3-art img{max-width:calc(100% + 64px)}
  #member-to-host .m3-deck .m3-plus h3{font-size:clamp(34px,5.4cqi,84px)}
  #member-to-host .m3-deck .m3-map{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"art art" "head body";row-gap:clamp(16px,2.4cqb,40px);align-content:center}
  #member-to-host .m3-deck .m3-map .m3-art{justify-content:center}
  #member-to-host .m3-deck .m3-map .m3-art img{width:100%;height:auto;max-height:min(56cqb,calc(100cqi * 556 / 1200))}
  #member-to-host .m3-deck .m3-map .m3-head{padding-top:0;align-self:start}
  #member-to-host .m3-deck .m3-map .m3-body{align-self:end}
  #member-to-host .m3-deck .m3-head{padding-top:calc(var(--art-h) * .12)}
  #member-to-host .m3-deck .m3-mark{font-size:clamp(20px,2.1cqi,30px)}
  #member-to-host .m3-deck .m3-show h3{font-size:clamp(34px,6.2cqi,96px);margin-top:clamp(10px,1cqi,16px)}
  #member-to-host .m3-deck .m3-kick{font-size:clamp(18px,2.5cqi,34px)}
  #member-to-host .m3-deck .m3-desc{font-size:clamp(17px,1.6cqi,23px);line-height:1.6;max-width:38ch;margin-top:clamp(16px,1.6cqi,26px)}
  #member-to-host .m3-deck .m3-cta{font-size:clamp(16px,1.5cqi,21px);margin-top:clamp(14px,1.4cqi,22px)}
  /* 02 BE KNOWN: looping card and Owlsy poster grow with the deck (the fly-out measures the poster, so a local size is safe) */
  #member-to-host .m3-deck .m3-rep{--pp-poster-w:clamp(220px,min(32.5cqi,48cqb),470px);gap:clamp(14px,2.6cqi,48px)}
  #member-to-host .m3-deck .m3-rep h3{font-size:clamp(24px,3.7cqi,54px)}
  #member-to-host .m3-deck .m3-rep .m3-rep-txt{flex:1 1 14rem}
}
/* 761-1000px decks hide 02's looping card (above), so the Owlsy poster takes its room */
@container m3deck (min-width:761px) and (max-width:1000px){
  #member-to-host .m3-deck .m3-rep{--pp-poster-w:clamp(220px,min(36cqi,50cqb),400px)}
}
/* the pinned timeline's type grows on tall windows too (laptops keep today's sizes; .m3-compact still kicks in if it won't fit) */
#member-to-host.m3-staged .m3-path .m2-step h3{font-size:clamp(20px,min(1.9vh,1.4vw),28px);line-height:1.3}
#member-to-host.m3-staged .m3-path .m2-step p{font-size:clamp(14px,min(1.25vh,.95vw),18px);line-height:1.5}

/* ---- frames (Grif, Oct 19): the two full-height orange panels were far taller than their content. The deck (right) loses
   its frame entirely, the cards just sit on the page black; the timeline box (left) shrinks to wrap the timeline with a
   little breathing room, centred in the pinned area. max-height keeps it inside the pin, so on short windows
   mth-stage.js still sees the overflow and switches to the compact timeline. ---- */
#member-to-host .m3-deck{background:transparent;border:0;box-shadow:none;border-radius:0}
#member-to-host .m3-deck::before{content:none}
#member-to-host.m3-staged .m3-tlbox{align-self:center;height:auto;max-height:100%;padding:clamp(24px,2.2vw,40px) clamp(20px,1.8vw,32px) clamp(4px,.6vw,12px)}

/* ---- PlusPak matches the deck (Grif, Oct 19): "Reserve YOUR PlusPak" kept its old small companion sizing (320px box,
   34px headline) under deck cards that now scale to the window. On sections 1200px+ wide (where the deck has grown too) its art, type and video poster
   scale off the section's own width (cqi) and the window height, the same way the deck cards do, and the grey rule above
   it goes (the deck lost its frames too). Narrower screens keep today's layout. ---- */
#member-to-host section.m3-pak{border-top:0;gap:clamp(24px,3.4vw,72px)}
@media (min-width:1600px){#member-to-host section.m3-pak{flex-wrap:nowrap}}   /* art | text | poster stay on one row */
@container (min-width:1200px){
  #member-to-host .m3-pak .m3-pak-art img{--art-h:clamp(320px,min(40cqi,62vh),720px)}
  #member-to-host .m3-pak .m3-pak-txt{flex:1 1 26rem;max-width:34rem}
  #member-to-host .m3-pak .m3-step{font-size:clamp(14px,1.25cqi,20px)}
  #member-to-host .m3-pak .m3-pak-txt h3{font-size:clamp(40px,min(5.3cqi,5.9vh),84px);margin-top:clamp(10px,1cqi,16px)}
  #member-to-host .m3-pak .m3-cta{font-size:clamp(16px,1.35cqi,21px);margin-top:clamp(14px,1.4cqi,22px)}
  #member-to-host .m3-pak .m3-desc{font-size:clamp(17px,1.45cqi,23px);line-height:1.6;max-width:34ch;margin-top:clamp(16px,1.6cqi,26px)}
  /* the fly-out measures the poster, so a local poster size is safe (same approach as the deck's 02 card) */
  #member-to-host .m3-pak .pp-poster-col{--pp-poster-w:clamp(240px,min(22cqi,40vh),400px);width:var(--pp-poster-w)}
}
#member-to-host .m3-pak .pp-play-btn>span{white-space:nowrap}

/* PlusPak eyebrow (Grif, Oct 19): house eyebrow (glow dot + tracked caps style) pinned to the section's upper right.
   White text with the orange "tribe", like the hero eyebrows; the section gets extra top room so it never overlaps. */
#member-to-host section.m3-pak{position:relative;padding-top:calc(clamp(32px,4vw,56px) + clamp(40px,3.2vw,64px))}
#member-to-host .m3-pak .m3-pak-eyebrow{position:absolute;top:clamp(8px,1vw,16px);right:0;margin:0;color:#fff;white-space:nowrap}
#member-to-host .m3-pak .m3-pak-eyebrow .m2-t{color:var(--orange)}
@media (max-width:640px){
  #member-to-host .m3-pak .m3-pak-eyebrow{right:auto;left:50%;transform:translateX(-50%);white-space:normal;text-align:center;width:max-content;max-width:100%}
}