/* CVyarat frontend stability layer — loaded last on purpose. */

html,body{max-width:100%;overflow-x:clip}
body{min-width:320px}
.landing{display:block!important;overflow-x:clip!important}
.landing>.shell{width:min(1280px,calc(100% - 48px))!important;margin-inline:auto!important}

/* Header contrast and layout */
.redesignTopbar{isolation:isolate}
.topbarInner{width:min(1320px,calc(100% - 32px))!important;margin-inline:auto!important}
.brand{min-width:0!important;border-radius:12px!important}
body.dark .brand{padding:5px 8px!important;background:rgba(255,255,255,.94)!important;box-shadow:0 7px 22px rgba(0,0,0,.22)!important}
body.dark .brandLogo{filter:none!important;opacity:1!important}
.navLinks button,.headerControls button{min-height:40px}

/* Hero: remove the empty-looking strip caused by the negative pseudo layer. */
.heroSection{
  isolation:isolate!important;
  min-height:650px!important;
  padding-block:56px 66px!important;
  overflow:visible!important;
}
.heroSection:before{
  inset:14px 0 18px!important;
  z-index:0!important;
  border-radius:38px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(244,249,255,.42))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.72)!important;
}
body.dark .heroSection:before{background:linear-gradient(135deg,rgba(16,34,57,.86),rgba(7,20,38,.50))!important;box-shadow:none!important}
.heroSection:after{z-index:0!important;pointer-events:none}
.heroCopy,.heroVisual{position:relative;z-index:1}
.heroCopy h1{text-wrap:balance}
.heroCopy>p{text-wrap:pretty}
.heroMiniStats>div{min-width:0}
.featureGrid{margin-top:-24px!important}

/* Premium cards: solid surfaces and readable metadata in both themes. */
.premiumBlock{overflow:hidden!important;isolation:isolate!important}
.premiumShowcaseGrid{min-width:0!important;align-items:stretch!important}
.premiumShowcaseCard{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
  padding:13px!important;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 58%,color-mix(in srgb,var(--soft) 28%,#fff) 100%)!important;
  border:1px solid rgba(217,228,242,.92)!important;
  color:#07152f!important;
  box-shadow:0 20px 58px rgba(2,12,28,.22)!important;
}
.premiumShowcaseCard:hover{background:linear-gradient(180deg,#fff,#f6f9ff)!important}
.premiumShowcaseCard .premiumThumb{flex:0 0 auto!important}
.premiumShowcaseCard .premiumMeta{display:grid!important;gap:6px!important;margin-top:auto!important;padding:0 3px 3px!important;color:#07152f!important}
.premiumShowcaseCard .premiumMeta b{display:block!important;color:#07152f!important;font-size:20px!important;line-height:1.16!important;overflow-wrap:anywhere!important}
.premiumShowcaseCard .premiumMeta small{display:block!important;color:#5f718b!important;font-size:12px!important;line-height:1.45!important;overflow-wrap:anywhere!important}
body.dark .premiumShowcaseCard{background:linear-gradient(180deg,#12243d,#0c1c32)!important;border-color:#2a4568!important;color:#f8fbff!important}
body.dark .premiumShowcaseCard:hover{background:linear-gradient(180deg,#172c49,#10233d)!important}
body.dark .premiumShowcaseCard .premiumMeta,body.dark .premiumShowcaseCard .premiumMeta b{color:#f8fbff!important}
body.dark .premiumShowcaseCard .premiumMeta small{color:#b9c8df!important}

/* Light CTA inherited white text from the former blue design. */
.ctaCard{color:var(--ui-ink)!important;overflow:hidden!important;isolation:isolate!important}
.ctaCard h2{color:var(--ui-ink)!important;text-wrap:balance}
.ctaCard p{color:var(--ui-muted)!important}
body.dark .ctaCard,body.dark .ctaCard h2{color:var(--ui-ink)!important}
.ctaActions{flex:0 0 auto}
.ctaPrimary,.ctaGhost{min-height:46px;padding:11px 18px}

/* Long content and footer wrapping */
.aboutCard>*{min-width:0}
.aboutCard h2,.freeAccessCard h2{overflow-wrap:anywhere;text-wrap:balance}
.aboutCard p,.aboutCard li{overflow-wrap:anywhere}
.landingFooter{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:22px!important}
.footerBrand,.footerLinks{min-width:0;display:flex;align-items:center;flex-wrap:wrap}
.footerLinks{justify-content:flex-end;gap:18px}

/* Authentication */
.authShell>*{min-width:0}
.authForm input{width:100%;font-size:16px}
.authPromo h1{text-wrap:balance}

/* Builder/editor containment */
.creatorWorkspace>*{min-width:0}
.creatorEditor,.creatorRail,.creatorPreview{max-width:100%}
.smartField input,.smartField textarea,.designFilters input,.designFilters select{max-width:100%}
.templateStudioGrid>*{min-width:0}
.studioTemplateMeta b,.studioTemplateMeta small{display:block;overflow-wrap:anywhere}
.creatorPaperStage{overscroll-behavior:contain}

@media(max-width:1180px){
  .landing>.shell{width:min(100% - 32px,960px)!important}
  .premiumBlock{grid-template-columns:1fr!important;gap:32px!important}
  .premiumCopy{max-width:720px}
  .premiumShowcaseGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .premiumShowFrame{height:300px!important}
}

@media(max-width:900px){
  .topbarInner{width:calc(100% - 24px)!important;gap:10px!important}
  .topbarRight{gap:6px!important}
  .heroSection{min-height:auto!important;padding-block:38px 48px!important}
  .heroSection:before{inset:8px 0 10px!important}
  .heroVisual{min-height:480px!important}
  .featureGrid{margin-top:18px!important}
  .premiumBlock{margin-top:48px!important}
  .premiumShowcaseGrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .premiumShowFrame{height:280px!important}
  .premiumShowcaseCard .premiumMeta b{font-size:17px!important}
  .landingFooter{align-items:flex-start!important}
}

@media(max-width:640px){
  .landing>.shell{width:calc(100% - 20px)!important}
  .topbarInner{width:calc(100% - 16px)!important;gap:6px!important}
  .brandLogo{height:32px!important;max-width:96px!important}
  body.dark .brand{padding:3px 5px!important}
  .headerControls{gap:3px!important}
  .langCapsule{padding:2px!important}
  .langCapsule button{min-width:27px!important;width:27px!important;height:30px!important;padding:0!important}
  .redesignTopbar .primaryBtn{min-width:72px!important;padding-inline:8px!important}
  .heroSection{padding-block:28px 38px!important}
  .heroSection:before{inset:4px 0 8px!important;border-radius:24px!important}
  .heroCopy{padding-inline:9px!important}
  .heroCopy h1{font-size:clamp(39px,12vw,52px)!important;line-height:.98!important}
  .heroMiniStats{padding-inline:8px}
  .heroVisual{min-height:390px!important;margin-top:26px!important}
  .heroResumeFrame{width:min(88%,330px)!important}
  .heroStatusCard{right:0!important;bottom:2%!important;max-width:82%!important}
  .premiumBlock{padding:26px 18px!important}
  .premiumShowcaseGrid{grid-template-columns:1fr!important;gap:16px!important}
  .premiumShowcaseCard:nth-child(3){display:flex!important}
  .premiumShowFrame{height:330px!important}
  .premiumShowcaseCard .premiumMeta b{font-size:20px!important}
  .ctaCard{padding:25px 21px!important}
  .ctaActions{display:grid!important;grid-template-columns:1fr!important}
  .ctaActions button{width:100%}
  .landingFooter{display:grid!important;justify-items:center!important;text-align:center!important}
  .footerBrand,.footerLinks{justify-content:center!important}
  .authPromo,.authForm{padding:25px 21px!important}
  .authPromo h1{font-size:34px!important}
  .creatorSteps{grid-template-columns:1fr 1fr!important}
  .creatorPreview{min-height:460px!important}
}

@media(max-width:420px){
  .brandLogo{max-width:82px!important;height:29px!important}
  .langCapsule button{min-width:24px!important;width:24px!important;font-size:10px!important}
  .redesignTopbar .primaryBtn{min-width:64px!important;font-size:10px!important;padding-inline:6px!important}
  .heroCopy h1{font-size:38px!important}
  .premiumShowFrame{height:290px!important}
  .templateStudioGrid{grid-template-columns:1fr!important}
  .creatorHeroActions{display:grid!important;grid-template-columns:1fr!important}
  .creatorHeroActions button{width:100%}
}

@media print{
  .redesignTopbar,.frontendOnly,.creatorHero,.creatorRail,.creatorEditor,.previewToolbar{display:none!important}
  body{overflow:visible!important}
}
