/* ================================================================
   STUDI — REFINED PREMIUM PASS
   Calm scale, restrained motion, softer depth.
   ================================================================ */

:root{
  --studi-fs-body:14.5px;
  --studi-fs-nav:12.3px;
  --studi-fs-small:10.8px;
  --studi-fs-micro:9.3px;
  --studi-fs-lead:15.5px;
  --studi-fs-h3:15.5px;
  --studi-fs-h2:24px;
  --studi-fs-h1-min:37px;
  --studi-fs-h1-max:56px;
  --studi-fs-hero-min:50px;
  --studi-fs-hero-max:78px;
}

/* Keep hierarchy readable without making every utility element oversized. */
body{font-size:var(--studi-fs-body)!important}
.main.page{
  padding-left:clamp(30px,4vw,66px)!important;
  padding-right:clamp(30px,4vw,66px)!important;
}
.nav a{font-size:var(--studi-fs-nav)!important;padding:11px 13px!important}
.nav-label{font-size:9px!important}
.profile-mini strong,.side-card b{font-size:10.5px!important}
.profile-mini small,.side-card p{font-size:9px!important}
.crumb{font-size:10.5px!important}
.pill{font-size:9.5px!important;padding:8px 12px!important}
.eyebrow{font-size:9px!important;letter-spacing:2.2px!important}
h1{
  font-size:clamp(var(--studi-fs-h1-min),4.2vw,var(--studi-fs-h1-max))!important;
  letter-spacing:-2.15px!important;
  line-height:1.04!important;
}
h2{font-size:var(--studi-fs-h2)!important;letter-spacing:-.8px!important}
h3{font-size:var(--studi-fs-h3)!important}
.lead{font-size:var(--studi-fs-lead)!important;line-height:1.62!important;max-width:700px!important}
.btn{font-size:10.5px!important;padding:11px 15px!important;border-radius:12px!important}
.stat strong{font-size:27px!important}
.stat span,.stat small,.tag,.course-meta,.topic small,label{font-size:9px!important}
.card p,.course-card p,.room-card p,.message,.bubble,.integration-card p{font-size:10.5px!important}
.topbar{margin-bottom:34px!important}
.page-head{margin-bottom:28px!important}

/* Smaller and quieter accessibility scale control. */
.studi-type-scale{
  gap:2px!important;
  padding:3px!important;
  background:rgba(255,254,250,.72)!important;
  box-shadow:none!important;
}
.studi-type-scale button{
  height:26px!important;
  min-width:27px!important;
  font-size:9px!important;
  padding:0 6px!important;
}
.studi-type-scale .scale-value{
  min-width:44px!important;
  background:#edf2e9!important;
}

/* Home hero: premium, spacious, but not oversized or loud. */
#p-index .hero{
  min-height:clamp(480px,60vh,620px)!important;
  padding:clamp(44px,5.1vw,74px)!important;
  border-radius:34px!important;
  background:
    radial-gradient(circle at 78% 24%,rgba(239,191,155,.26) 0 10%,transparent 30%),
    radial-gradient(circle at 78% 27%,rgba(145,184,147,.28) 0 18%,transparent 42%),
    linear-gradient(122deg,#f0f3e8 0%,#e4ede0 52%,#c8dac9 100%)!important;
  box-shadow:0 24px 70px rgba(45,73,55,.10)!important;
  border:1px solid rgba(66,96,75,.13)!important;
}
#p-index .hero:before{
  font-size:clamp(110px,14vw,240px)!important;
  color:rgba(255,255,255,.085)!important;
  bottom:-.14em!important;
}
#p-index .hero:after{opacity:.07!important}
#p-index .hero-copy{max-width:min(720px,66%)!important}
#p-index .hero h1{
  font-size:clamp(var(--studi-fs-hero-min),6vw,var(--studi-fs-hero-max))!important;
  line-height:.98!important;
  letter-spacing:-.052em!important;
  margin-bottom:18px!important;
}
#p-index .hero .lead{
  max-width:610px!important;
  font-size:clamp(15px,1vw,17.5px)!important;
  line-height:1.58!important;
  color:#61786c!important;
}
#p-index .hero .head-actions{margin-top:26px!important;gap:9px!important}
#p-index .hero .btn{padding:12px 16px!important;font-size:10.8px!important}
#p-index .hero-orb{
  width:clamp(235px,24vw,390px)!important;
  height:clamp(235px,24vw,390px)!important;
  right:5%!important;
  top:12%!important;
  opacity:.72!important;
  animation:refinedOrb 19s ease-in-out infinite!important;
}
#p-index .hero-ring{
  width:clamp(300px,30vw,470px)!important;
  height:clamp(300px,30vw,470px)!important;
  border-width:30px!important;
  opacity:.52!important;
  right:-7%!important;
  bottom:-24%!important;
  animation:refinedRing 32s linear infinite!important;
}
#p-index .hero-pill{
  width:140px!important;
  height:46px!important;
  opacity:.56!important;
  right:31%!important;
  bottom:11%!important;
}
@keyframes refinedOrb{
  0%,100%{translate:0 0;rotate:0deg}
  50%{translate:-7px 8px;rotate:2deg}
}
@keyframes refinedRing{to{rotate:360deg}}

/* Keep only two restrained data cards. */
.hero-float-card{
  width:150px!important;
  padding:12px 13px!important;
  border-radius:17px!important;
  background:rgba(255,254,250,.61)!important;
  box-shadow:0 12px 34px rgba(43,71,53,.075)!important;
  animation:refinedFloat 12s ease-in-out infinite!important;
}
.hero-float-card b{font-size:20px!important}
.hero-float-card small{font-size:8.5px!important}
.hero-float-three{display:none!important}
.hero-float-one{right:5.5%!important;top:9%!important}
.hero-float-two{right:17%!important;bottom:8%!important}
@keyframes refinedFloat{0%,100%{translate:0 0}50%{translate:0 -4px}}
.studi-scroll-cue{opacity:.68!important}

/* Remove the constantly moving ticker: preserve the concept as a quiet divider. */
.studi-marquee{
  margin:18px 0 2px!important;
  border-radius:14px!important;
  background:rgba(36,70,58,.035)!important;
  border:1px solid rgba(49,78,64,.08)!important;
  color:#60796b!important;
}
.studi-marquee-track{
  width:100%!important;
  min-width:100%!important;
  justify-content:center!important;
  gap:16px!important;
  padding:9px 14px!important;
  animation:none!important;
  font-size:9px!important;
  letter-spacing:2px!important;
}
.studi-marquee-track i{color:#8eb391!important}
.studi-marquee-track > :nth-child(n+9){display:none!important}

/* Content scale: room to breathe without inflating utility text. */
#p-index .quick-grid{gap:16px!important;margin-top:16px!important}
#p-index .focus-card,#p-index .exam-next{min-height:132px!important;padding:22px!important}
#p-index .focus-card .time{font-size:42px!important;letter-spacing:-2.4px!important}
#p-index .card-pad{padding:23px!important}
#p-index .course-row{padding:13px!important;grid-template-columns:40px 1fr auto!important}
#p-index .course-icon{width:40px!important;height:40px!important}
#p-index .week-chart{height:132px!important}
#p-index .youtube-mini{
  min-height:128px!important;
  padding:21px!important;
  grid-template-columns:155px 1fr auto!important;
  gap:16px!important;
}
#p-index .thumb{height:88px!important}
#p-index .improve-card{padding:23px!important;min-height:155px!important}

/* Soft motion language: reveal, hover, page entry. */
.card.hover{
  transition:
    transform .34s cubic-bezier(.16,1,.3,1),
    box-shadow .34s cubic-bezier(.16,1,.3,1),
    border-color .34s ease!important;
}
.card.hover:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 20px 48px rgba(49,78,64,.085)!important;
}
.btn:hover{transform:translateY(-1px)!important}
.studi-reveal{
  opacity:0!important;
  transform:translateY(14px)!important;
  filter:blur(2px);
  transition:
    opacity .66s cubic-bezier(.16,1,.3,1),
    transform .66s cubic-bezier(.16,1,.3,1),
    filter .66s ease!important;
}
.studi-reveal.studi-in{
  opacity:1!important;
  transform:none!important;
  filter:none;
}
.main.page:not([hidden]){
  animation:refinedPageIn .42s cubic-bezier(.16,1,.3,1) both!important;
}
@keyframes refinedPageIn{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}

/* Keep the interface calm when hovering large areas. */
.card{will-change:auto!important}

/* Small screens */
@media(max-width:1260px){
  #p-index .hero-copy{max-width:75%!important}
}
@media(max-width:900px){
  #p-index .hero{
    min-height:500px!important;
    padding:40px 32px 62px!important;
    align-items:flex-end!important;
  }
  #p-index .hero-copy{max-width:100%!important}
  #p-index .hero h1{font-size:clamp(47px,9vw,66px)!important}
  #p-index .hero-orb{opacity:.30!important}
  #p-index .youtube-mini{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  .main.page{padding-left:18px!important;padding-right:18px!important}
  #p-index .hero{
    min-height:475px!important;
    border-radius:26px!important;
    padding:34px 23px 58px!important;
  }
  #p-index .hero h1{font-size:clamp(42px,12.5vw,58px)!important}
  #p-index .hero .lead{font-size:14.5px!important}
  .studi-marquee-track{gap:10px!important;letter-spacing:1.2px!important}
}

/* Light ambient animation only. */
@media(prefers-reduced-motion:reduce){
  #p-index .hero-orb,#p-index .hero-ring,.hero-float-card{animation:none!important}
}