/* Full width (html[data-wide="1"]), an experimental preview: the page's
   measure grows with the screen the way Celonis and UiPath use theirs (their
   width, not their palettes). The 1180 px column becomes one that runs to
   1760 px with gutters of 5vw; the headlines grow with it, the body copy
   keeps its measure (34em or less, in a column that never runs wider), and
   the film, the rehearsal, the logos and the beta form take the room. The
   giant wheel and matrix already run to the screen's edges.

   Every rule is scoped under html[data-wide="1"], so while the switch is off
   this sheet changes nothing. Below 1280 px nothing changes either: there
   the page's own fluid gutters already set the column (100% - 10vw, under
   the 1180 cap), so phones and tablets look the same with it on.

   Each size below continues the page's own clamp past the point where it
   used to stop: min(the page's slope, max(the old cap, a gentler slope or a
   share of the screen's height)), up to a new cap. So it is never smaller
   than with the switch off (at 1440 the type is what it was), and it only
   grows on the screens that have the width, and the height, for it. */

@media (min-width:1280px) and (min-height:521px){
  html[data-wide="1"]{
    --gut:clamp(20px,5vw,128px);
    /* the hero's headline: 7.2vw as before; past the old 112 px only as far
       as a share of the screen's height, so three lines and the lede still
       sit inside the first screen (on a short window it stays at 112) */
    --h1:clamp(50px,min(7.2vw,max(112px,13.5vh)),160px);
  }
  html[data-wide="1"] .wrap{width:min(1760px,100% - 2*var(--gut))}

  /* the hero: the words' box grows with the headline (6.6 of its em, what
     46rem was to 112 px), never past the 64% the orb leaves */
  html[data-wide="1"] .hero-copy{max-width:min(max(46rem,calc(var(--h1) * var(--fk) * 6.6)),64%)}
  html[data-wide="1"] .lede{font-size:clamp(18px,min(1.45vw,max(22px,17.3px + .3125vw)),25px)}

  /* the film: the measure's width, as long as all of it fits under the
     header with its gap above and below; never narrower than it is with
     the switch off (min(1180px, 100% - 128px): the page's own column here) */
  html[data-wide="1"] .film-sec .wrap{width:max(min(1180px,100% - 128px),min(1760px,100% - 2*var(--gut),(100vh - var(--top-h) - 2 * var(--film-gap)) * 16 / 9))}
  @supports (height:100svh){
    html[data-wide="1"] .film-sec .wrap{width:max(min(1180px,100% - 128px),min(1760px,100% - 2*var(--gut),(100svh - var(--top-h) - 2 * var(--film-gap)) * 16 / 9))}
  }

  /* headings: a step under the hero's at every width, as before, and like it
     held to a share of the height only above their old caps */
  html[data-wide="1"] h2{font-size:calc(clamp(32px,min(4.3vw,max(62px,8.6vh)),96px) * var(--fk))}
  html[data-wide="1"] .feat-problem h2{font-size:calc(clamp(32px,min(4.6vw,max(66px,9.2vh)),102px) * var(--fk))}
  /* body copy: a size up at most, in the same em measure */
  html[data-wide="1"] .body{font-size:clamp(18px,min(1.35vw,max(19.5px,15px + .3125vw)),21.5px)}
  html[data-wide="1"] .feat-problem .body{font-size:clamp(18px,min(1.6vw,max(22.5px,18px + .3125vw)),25px)}

  /* the twelve columns' gutters open up with the measure */
  html[data-wide="1"] .feat-grid,
  html[data-wide="1"] .feat-head,
  html[data-wide="1"] .stack-head{column-gap:clamp(24px,3vw,72px)}

  /* the rehearsal: the client's words and the coach's under their drops */
  html[data-wide="1"] .rh-title{column-gap:clamp(72px,8vw,160px)}
  html[data-wide="1"] .rh-who h3{font-size:calc(clamp(20px,min(1.9vw,max(27px,14px + .9vw)),34px) * var(--fk))}
  html[data-wide="1"] .rh-who p{font-size:clamp(15.5px,min(1.25vw,max(18.5px,13.9px + .3125vw)),20.5px)}

  /* the beta pane: its padding grows past the old 76 px, gently */
  html[data-wide="1"] .beta-card{padding:clamp(28px,min(5.4vw,max(76px,40px + 2.5vw)),100px)}
}

/* the logos, their plates and the beta form: a size up, then another, as
   the measure passes 1600 and 1900 px (the spine measures the plates, so the
   thread follows; the plain logos' own plate rules still win on the bead) */
@media (min-width:1600px) and (min-height:521px){
  html[data-wide="1"] .stack{--sk-k:1.12;--sk-plate:60px;--sk-pad:26px;--sk-t:16px}
  html[data-wide="1"] .field label{font-size:16px}
  html[data-wide="1"] .field input{height:60px;font-size:18px;padding:0 18px}
  html[data-wide="1"] .btn-submit{min-height:60px;padding:0 32px;font-size:17px}
  html[data-wide="1"] .trust{font-size:15.5px}
}
@media (min-width:1900px) and (min-height:521px){
  html[data-wide="1"] .stack{--sk-k:1.24;--sk-plate:66px;--sk-pad:30px;--sk-t:17px}
}