/* Layout layer, loaded after styles.css so the canvas CSS stays verbatim.
   Base fixes at every width, then a desktop layer that fills the screen and puts headings beside content. */
[hidden]{display:none !important}
#lovable-badge{display:none !important}
@media (max-width:759px){.nav .btn{display:none}}
.sec.shell{padding-left:16px;padding-right:16px}
@media (min-width:760px){.sec.shell{padding-left:32px;padding-right:32px}}

@media (min-width:1180px){
  .shell{max-width:none;margin:0;padding-left:176px;padding-right:56px}
  .nav .shell{padding-left:56px}
  .sec.shell{padding-left:176px;padding-right:56px}
  .hero{min-height:calc(100vh - 64px);display:flex;flex-direction:column;justify-content:center;padding:64px 56px 48px 176px}
  .hl{font-size:clamp(96px,8.4vw,168px)}
  .hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:72px;margin-top:32px}
  .scrollm{margin-top:28px}
  .sec{padding-top:88px;padding-bottom:88px}
  /* side-by-side sections: sticky heading left, content right */
  .sec.shell{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);column-gap:64px;row-gap:0;align-items:start}
  .sec.shell > .sec-head{grid-column:1;padding-right:0;position:sticky;top:92px}
  .sec.shell > :not(.sec-head){grid-column:2}
  .sec.shell > .foot{grid-column:1 / -1}
  .sec.shell > .sec-head .h2{font-size:clamp(30px,2.6vw,44px)}
  .num{position:static;display:block;font-size:200px;line-height:.8;margin:0 0 -26px -8px}
  .picks,.caps,.ind,.roi,.score-form,.proof,.steps,.faq,.contact{margin-top:0}
  .ind-note{margin-top:14px}
  .status{margin-top:16px}
  .pick{font-size:clamp(26px,2.2vw,38px)}
  .ways a{font-size:clamp(22px,2.1vw,34px);word-break:break-word}
  .ways li{padding:14px 0}
  .roi{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px}
  .big{font-size:clamp(40px,3.4vw,72px)}
  .roi-out{padding:24px}
  .steps{grid-template-columns:1fr}
  .step{padding:28px 0;border-right:0;border-bottom:3px solid var(--bone);margin-right:0;padding-left:0;padding-right:0}
  .step:last-child{border-bottom:0}
  /* wide sections: compact horizontal heading on top, content full width below */
  .sec.shell.wide{display:block}
  .sec.shell.wide > .sec-head{position:static;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:40px;align-items:end;margin-bottom:44px}
  .sec.shell.wide > .sec-head .num{grid-column:1;grid-row:1 / span 3;margin:0;font-size:220px;align-self:center}
  .sec.shell.wide > .sec-head .tag,.sec.shell.wide > .sec-head .h2,.sec.shell.wide > .sec-head .lead{grid-column:2}
  .sec.shell.wide > .sec-head .h2{font-size:clamp(34px,3.2vw,52px);margin-top:14px}
  .sec.shell.wide > .sec-head .lead{max-width:70ch}
  .ex{grid-template-columns:360px minmax(0,1fr);gap:40px}
}
@media (min-width:1600px){
  .shell{padding-left:200px;padding-right:72px}
  .sec.shell{padding-left:200px;padding-right:72px}
  .hero{padding-left:200px;padding-right:72px}
  .sec.shell{grid-template-columns:minmax(0,7fr) minmax(0,17fr);column-gap:80px}
  .picks{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 36px}
  .pick{font-size:clamp(28px,2vw,40px)}
  .pick:nth-last-child(-n+4){border-bottom:3px solid var(--bone)}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .step{padding:36px 32px;border-bottom:0;border-right:3px solid var(--bone);margin-right:0}
  .step:last-child{border-right:0}
  .roi{gap:40px}
  .big{font-size:clamp(48px,4vw,84px)}
  .ways a{font-size:clamp(24px,1.9vw,34px)}
  .ex{grid-template-columns:400px minmax(0,1fr);gap:48px}
}