/* home-wide: big-display layouts for the homepage sections below FROM MEMBER TO HOST (Grif, Oct 17).
   Same idea as the pinned deck in mth-stage.css: on wide screens a section may outgrow the 1440px rail and its
   type and art scale off the section's own width (cqi). Each block is gated by a container query on its own
   section, so laptop and mobile layouts are untouched. ID selectors so these win over the inline section CSS. */

/* ---- WHAT WE BELIEVE: one row of four (Members pair | Hosts pair) instead of a sparse 2x2 ---- */
@container (min-width:1400px){
  #what-we-believe .m2-vm-inner{max-width:min(120rem,100%);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,1.6cqi,36px);
    grid-template-areas:"head head" "l1 l2" "g1 g2"}
  #what-we-believe .m2-vm-head{grid-area:head;max-width:none}
  #what-we-believe .m2-vm-label{grid-area:l1;margin-top:clamp(64px,4.4cqi,96px)}
  #what-we-believe .m2-vm-label.m2-next{grid-area:l2}
  #what-we-believe .m2-vm-label+.m2-vm-grid{grid-area:g1}
  #what-we-believe .m2-vm-label.m2-next+.m2-vm-grid{grid-area:g2}
  #what-we-believe .m2-vm-grid{gap:clamp(20px,1.6cqi,36px);margin-top:clamp(20px,1.4cqi,28px)}
  #what-we-believe h2{font-size:clamp(3.25rem,4.4cqi,5.5rem);margin-top:clamp(18px,1.2cqi,26px)}
  #what-we-believe .m2-vm-card{padding:clamp(28px,2.4cqi,48px);gap:clamp(20px,1.6cqi,32px);border-radius:16px;min-height:clamp(320px,24cqi,460px)}
  #what-we-believe .m2-vm-icon{width:clamp(56px,4.4cqi,84px);height:clamp(56px,4.4cqi,84px);flex-basis:clamp(56px,4.4cqi,84px)}
  #what-we-believe .m2-vm-icon svg{width:46%;height:46%}
  #what-we-believe .m2-vm-card h3{font-size:clamp(24px,1.9cqi,36px);line-height:1.2}
  #what-we-believe .m2-vm-card p{font-size:clamp(16px,1.12cqi,21px);line-height:1.6}
}

/* ---- tribeTools (Nine tools. One passport.): the console outgrows the 1440px rail (up to 1920px) and its type scales.
   The preview keeps its existing height cap (it always fits on screen with Listen/Pause), so short windows are safe. ---- */
@media (min-width:1700px){
  #tribetools{--rail:120rem}
  #tribetools .tw-head{max-width:72rem;margin-bottom:clamp(36px,3vw,64px)}
  #tribetools .tw-h{font-size:clamp(52px,3.7vw,88px)}
  #tribetools .tw-sub{font-size:clamp(18px,1.15vw,24px)}
}
@container (min-width:1500px){
  #tribetools .tw-console{grid-template-columns:clamp(280px,21cqi,400px) minmax(0,1fr)}
  #tribetools .tw-list{min-height:clamp(380px,30cqi,600px)}
  #tribetools .tw-stage{padding:clamp(24px,2cqi,40px);gap:clamp(14px,1.1cqi,22px)}
  #tribetools .tw-title{font-size:clamp(22px,1.7cqi,34px)}
  #tribetools .tw-desc{font-size:clamp(15px,1.1cqi,20px)}
}

/* ---- PRICING (Build your sovereign tribe): the cards already span the width but their 9-11px mono type and padding
   were laptop-sized. On wide screens type, prices, padding and spacing scale with the viewport. (#pricing hook added
   to the section for this; the eyebrow above the heading is sized in home-eyebrows.css.) ---- */
@media (min-width:1700px){
  #pricing .max-w-3xl{max-width:min(64rem,100%)}
  #pricing h2{font-size:clamp(60px,4.6vw,110px)}
  #pricing h2+p{font-size:clamp(14px,1vw,20px);max-width:44rem}
  #pricing .grid .p-10{padding:clamp(40px,2.6vw,64px)}
  #pricing .grid .text-\[9px\]{font-size:clamp(9px,.68vw,14px)}
  #pricing .grid .text-\[10px\]{font-size:clamp(10px,.78vw,16px)}
  #pricing .grid .text-\[11px\]{font-size:clamp(11px,.86vw,17px)}
  #pricing .grid :is(.text-base,.text-lg){font-size:clamp(18px,1.3vw,28px)}
  #pricing .grid .text-3xl{font-size:clamp(30px,2.5vw,54px)}
  #pricing .grid .text-4xl{font-size:clamp(36px,3vw,64px)}
  #pricing .grid .p-8{padding:clamp(32px,2.4vw,60px)}
  #pricing .grid h3{margin-bottom:clamp(8px,.7vw,16px)}
  #pricing .grid .text-xl{font-size:clamp(20px,1.5vw,30px)}
  #pricing .grid .space-y-4>:not([hidden])~:not([hidden]){margin-top:clamp(16px,1vw,22px)}
  #pricing .grid .mb-8{margin-bottom:clamp(32px,2vw,44px)}
}

/* ---- FROM MEMBER TO HOST header: on wide screens the lettering, headline and intro were laptop-sized and the intro was a
   narrow hand-broken stack. Now the lettering and headline scale with the section, and the intro reads as two balanced
   lines (the forced <br>s only apply below this width). ---- */
@container (min-width:1200px){
  #member-to-host .m2-mth h2,#member-to-host h2#m2-mth-h{font-size:clamp(52px,5.4cqi,96px);margin-top:clamp(22px,1.8cqi,36px)}
  #member-to-host h2#m2-mth-h video,#member-to-host h2#m2-mth-h img{width:min(100%,clamp(560px,52cqi,980px));margin-bottom:clamp(4px,.6cqi,12px)}
  #member-to-host .m2-mth-sub{max-width:min(52ch,100%);margin-top:clamp(22px,1.8cqi,34px);font-size:clamp(18px,1.45cqi,26px);line-height:1.55;text-wrap:balance}
  #member-to-host .m2-mth-sub br{display:none}
}